colgroup中col標籤指定width不生效的問題
阿新 • • 發佈：2021-12-14
前陣子用HTML給公司的銷售同事寫了一個列印模板，需要調整表格每個列的寬度
先上最終調整完的效果：
表格有列合併、並且對每列的寬度有要求
實現過程
列合併實現比較簡單，使用在td標籤上配置colspan屬性即可
實現每列寬度時就比較坑了，一開始我給每個td標籤都指定了寬度，但是由於存在列合併（即使用了colspan屬性），td指定的width會失效
後面通過搜尋引擎查到可以給col標籤配置width屬性，但是發現設定width屬性只對第一行生效，再查閱mdn之後，發現col的width屬性已經在html5中被廢棄了
此時我已經抓耳撓腮了，沒想到一個基礎表格的調整僅如此艱難，感慨自己的基本功還是不夠，突然想到之前收藏的 阮一峰老師寫的HTML文件裡面有col標籤的用例，用例中給每個col標籤添加了class屬性，再通過css去設定樣式
於是我給每個col標籤指定了class類名，並通過css設定width屬性，終於完美實現了表格列寬的調整
這裡還有另一個知識點，表格列的寬度會根據內容的寬度自動調整，所以即使你指定了td的寬度，內容過寬時，整個表格的佈局還是會發生改變，需要給table標籤的樣式屬性新增table-layout: fixed