前阵子用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