关于 table-layout 属性

时间:2021-12-09 12:08:01

我们经常会使用table,并且去手动的设置它的宽度,比如:

<table>
   <tr>
        <td class="left">...</td>
        <td class="right">...</td>
   </tr>
</table>

样式:

.left{width:20%;}
.right{width:80%;}

但是发现,只要有一个td超过了原本设置宽度,所以td的宽度都不会根据我们设置的宽度显示。

这时,就需要我们去设置 table-layout 属性为 fixed

table-layout:fixed;

table-layout 属性就是用来规定表格单元格、行、列的算法规则。

该值只有三个值:auto(自动),fixed(固定), inherit(继承父级标签的table-layout值)。

所以在我们要设定table中的tr、td高宽的时候,最好先设定table中的table-layout为fixed。