适用场景:项目中遇到table表格单元格不整齐、错位等情况。
如何解决:给table表格加上一个table-layout属性,默认值是automatic,这样列宽会根据单元格内容设定,操作不慎易导致表格宽度失效。因此,建议给表格加上table-layout: fixed,除此之外,也可在td中加上属性word-wrap: break;和width: auto !important。
补充几点:
1、没有使用colspan设计布局时,
<table>标签中没有加style="table-layout:fixed;"
列的宽度根据每行中最宽的决定;
加了style="table-layout:fixed;"
列宽根据第一行的列宽决定。
2、通过colspan来设计错位单元格的布局时,注意保持表格每行的单元格数一致。