table設定列寬度
阿新 • • 發佈：2019-01-26
遇到一個表格不能設定寬度（table有寬度，有一兩列需要設固定大小的寬度並希望看到展現出來的寬度值與設定的一樣，其他的列則可以根據剩餘寬度自動填充，但是顯示出來的寬度比實際設定的值多了幾個畫素）這個問題，百度了一下查到一些資料：
首先貼資料，相信大家看了基本就瞭解了：
tableLayout 屬性用來顯示錶格單元格、行、列的演算法規則。
固定表格佈局：
固定表格佈局與自動錶格佈局相比，允許瀏覽器更快地對錶格進行佈局。
在固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
通過使用固定表格佈局，使用者代理在接收到第一行後就可以顯示錶格 。
自動錶格佈局：
在自動錶格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。
此演算法有時會較慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的內容。（以上tableLayout的內容摘自http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp）
因此，在設定寬度的時候需要給table新增table-layout:fixed;。
但是在給td設定了寬度以後還是不能正常顯示，此時就需要一個其他的屬性 col或colgroup，給col或者colgroup設定一個寬度即可解決問題。(一個有趣的點是當設定的寬度不是4的倍數的時候，列的寬度總會顯示小數，即差那麼一點才滿設定的寬度，作為一個小菜雞暫時沒發現為啥，(lll￢ω￢))。
下面貼個程式碼，僅供參考：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table,tr,td{ border:1px solid; border-collapse:collapse; } table{ width:1000px; table-layout:fixed; } tr,td{ height:30px; } table>tbody>th>td{ width: 40px; } /*設定td的寬度,無效*/ /*#col1{ width: 40px; } #col2{ width: 80px; } #col4{ width: 50px; } #col7{ width: 120px; }*/ </style> </head> <body> <table> <!--所有的寬度設定時，已設定寬度不能被4整除時會出現不能設定寬度，與列數多少無關--> <!--全部用colgroup--> <!--<colgroup align="center" width="100"> </colgroup> <colgroup /> <colgroup /> <colgroup /> <colgroup /> <colgroup /> <colgroup style="width:90px;"/> <colgroup />--> <!--全部用col--> <!--<col width="90" /> <col /> <col width="90" />--> <!--<col /> <col width="80"/> <col /> <col /> <col />--> <!--colspan 和 col融合--> <colgroup span="3" width="90"> <!--組合用時同樣受4的倍數限定--> <col width="90"/> <col width="90"/> <col width="120"/> </colgroup> <colgroup span="1"></colgroup> <colgroup width="80"></colgroup> <!--span預設值為1--> <colgroup width="90"></colgroup> <colgroup span="2"></colgroup> <tr> <td id="col1">diyi</td> <td id="col1">diyi</td> <td id="col2">第二列</td> <td id="col3">第三列</td> <td id="col4">第四列</td> <td id="col5">第五列</td> <td id="col6">第六列</td> <td id="col7">第七列</td> </tr> <tr> <td>adfa</td> <td>颯颯東風</td> <td>諤諤</td> <td>打發</td> <td>打法微軟</td> <td>啊多發點</td> <td>啊啊啊啊啊啊</td> <td>啊啊啊啊啊啊</td> </tr> <tr> <td>fasdfa</td> <td>阿斯蒂芬</td> <td>啊打發</td> <td>阿迪斯發</td> <td>愛的色放我</td> <td>的法沙發和</td> <td>啊啊啊啊啊啊</td> <td>啊打發</td> </tr> </table> </body> </html>