前陣子用HTML給公司的銷售同事寫了一個打印模板，需要調整表格每個列的寬度
先上最終調整完的效果：
表格有列合並、並且對每列的寬度有要求
實現過程
列合並實現比較簡單，使用在td標簽上配置colspan屬性即可
實現每列寬度時就比較坑了，一開始我給每個td標簽都指定了寬度，但是由於存在列合並（即使用了colspan屬性），td指定的width會失效
后面通過搜索引擎查到可以表格配置colgroup標簽和col標簽，並為col標簽配置width屬性，但是查閱mdn之后，發現col的width屬性已經在html5中被廢棄了，這里建議不要使用
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .sf-shipping-mark-table { table-layout: fixed; width: 100%; line-height: 1.15; border-collapse: collapse; } .sf-shipping-mark-table td { margin: 0; padding: 10px; } .sf-shipping-mark-table th, .sf-shipping-mark-table td { box-sizing: border-box; } .sf-shipping-mark-table th, .sf-shipping-mark-table td { border: 1px solid #000; } </style> </head> <body style="width: 100mm;height: 130.6mm;margin: 0 auto;background-color: gray;"> <div style="background-color: white;"> <div class="sf-shipping-mark-table-wrap"> <table class="sf-shipping-mark-table"> <colgroup> <col width="40%"> </col> <col width="30%"> </col> <col width="20%"> </col> <col width="10%"> </col> </colgroup> <tbody> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td colspan="2"> 1 </td> <td> 3 </td> <td> 4 </td> </tr> </tbody> </table> </div> </div> </body> </html>
既然width屬性已經被廢棄了，那要怎么去配置寬度呢，抓耳撓腮之際，突然想到之前收藏的阮一峰老師寫的HTML文檔里面有col標簽的用例，用例中給每個col標簽添加了class屬性，再通過css去設置樣式
於是我給每個col標簽指定了class類名，並通過css設置width屬性，終於完美實現了表格列寬的調整
這里還有另一個知識點，表格列的寬度會根據內容的寬度自動調整，所以即使你指定了td的寬度，內容過寬時，整個表格的布局還是會發生改變，需要給table標簽的樣式屬性添加table-layout: fixed