table中td设置单元格合并后，出现宽度用style设置无效或变型，具体解决办法。
table设置了colspan之后再设置width 无效
解决办法：
设置table的样式table-layout:fixed
<table style="table-layout:fixed">....</table>
参考代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML> <html> <head> <title>Test</title> </head> <body> <table border="1" style="table-layout: fixed;"> <colgroup> <col style="width: 20px;"/> <col style="width: 30px;"/> <col style="width: 20px;"/> </colgroup> <tbody> <tr> <td>20</td> <td colspan="2">50</td> </tr> <tr> <td colspan="2">50</td> <td>20</td> </tr> </tbody> </table> </body> </html> |
扩展：colgroup与col标签
<col>标签是给表格中一个或多个列定义属性值，而<colgroup>标签是对表格中的列进行组合，从而实现对表格的格式化。<col>标签一般会放在<colgroup>标签中使用，对<colgroup>标签组合的列分别设置样式。<colgroup>标签也可以有样式属性，是对组合的列设置相同的样式，<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。
格式:
<colgroup span=“跨几列”>
<col 属性1=“属性值1” 属性2=“属性值2”…/>
<col 属性1=“属性值1” 属性2=“属性值2”…/>
</colgroup>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<table class="lytable-table"> <colgroup> <col width="110"> <col width="110"> <col width="40"> <col width="80"> <col width="40"> </colgroup> <thead> <tr> <th>维护项目</th> <th>维护分项</th> <th>次数</th> <th>周期</th> <th>月份</th> </tr> </thead> <tbody class="lytable-table__body"> <tr> <td>维护项目</td> <t>维护分项</td> <td>次数</td> <td>周期</td> <td>月份</td> </tr> </tbody> </table> |
HTML <colgroup> 标签 :传送门
HTML <col> 标签:传送门
表格格式化、表格宽度、固定宽度
声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！
学习了！
2022-06-24 上午10:05太强了
好
2022-06-24 上午10:06