table layout fixed 欄寬分配邏輯

在 table layout 設定為 fixed 的情況下如何分配欄寬，MDN 說明有點模糊，所以在此作詳細分析不同情境下欄寬分配邏輯

將所有狀況濃縮成一個說法會是『在欄寬總和小於等於表格寬的情況下會盡可能地符合表格寬』

欄寬設定上有分所有欄位都有設定固定欄寬，跟只有部分欄寬設定固定欄寬

所有欄都有設定欄寬

條件

• 表格寬度本身受外部寬度限縮或是本身有設定寬度
• 每欄都有設定自己的寬度(th 或 td)

欄寬總和小於等於表格寬

假設表格寬 800px，而總共五個欄位依序設定的寬度為 100, 150, 150, 200, 100，最終分配的寬度為何 ?

首先五欄設定寬度的總和只有 700，但表格寬 800，會剩餘 100 未分配(800 - 700)，這時瀏覽器會依設定寬度比例均分。

每欄能被再分到的寬度公式為

自身欄寬 + ((自身欄寬 * 未分配寬) / 欄寬總和)

所以每欄依序為

1. 100 + ((100 * 100) / 700) = 114.2857…
2. 150 + ((150 * 100) / 700) = 171.4285…
3. 150 + ((150 * 100) / 700) = 171.4285…
4. 200 + ((200 * 100) / 700) = 228.5714…
5. 100 + ((100 * 100) / 700) = 114.2857…

最終欄寬加總會接近表格寬 800

firefox, chrome 都是這邏輯，safari 雖然也是但計算上有些微誤差

欄寬總和大於表格寬

會直接延展表格，因此假設表格寬 800px，而總共五個欄位依序設定的寬度為 200, 150, 150, 200, 200，五欄加總為 900px ，表格會直接變成 900px。

只有部分欄設定固定欄寬

條件

• 表格寬度本身受外部寬度限縮或是本身有設定寬度
• 只有部分欄有設定自己的寬度(th 或 td)

欄寬總和小於等於表格寬

假設表格寬 800px，而總共五個欄位依序設定的寬度為 100, 150, 150, auto, auto，最終分配的寬度為何 ?

首先有設定寬度的欄位總和是 400，但表格寬 800，會剩餘 400 未分配(800 - 400)，這時瀏覽器會將剩餘寬度平均分給未設定的欄位。

所以每欄依序為

1. 100
2. 150
3. 150
4. 400 / 2 = 200
5. 400 / 2 = 200

firefox, chrome, safari 都是這邏輯

欄寬總和大於表格寬

假設表格寬 800px，而總共五個欄位依序設定的寬度為 300, 300, 300, auto, auto，最終分配的寬度為何 ?

由於前三欄的固定寬度總和已經超過 800，導致沒有剩於寬度給 4 跟 5 欄，所以未設定欄位會直接被擠壓成 0，但表格本身寬度依然會撐到 900

所以每欄依序為

1. 300
2. 300
3. 300
4. 0
5. 0

min-width, max-width 有沒有用 ?

在 table layout 為 fixed 的情況下 minWidth, maxWidth 都是沒有意義的，只有 width 才會有效果