这是一个简单的布局属性,内容如题。
本文主要讲解一个css属性:table-layout:fixed;。
本人在 画表格时,想要固定长度的列表格,但是始终不能如意,后来找到table-layout属性中有一属性"fixed"属性,能够固定表格的列长度,而不会随着 表格中列的长度变化而变化 。
使用和未使用了table-layout的区别看如下效果(有点,使用了该属性加载页面效率更快,因为在加载第一行数据的时候就已经确定了表格的布局,列长,列高已经固定,而未加该属性时,则需要加载完全部的表格数据才能确定表格的布局)。
上代码:
#_td1{
width: 10%;
}
#_td2{
width:10%;
}
#_td3{
width:40%;
}
#_td4{
width:40%;
}
#_table2{
table-layout:fixed;
}
<table id="_table1">
<tr>
<td id="_td1">111111111111111111111</td>
<td id="_td2">22222222222222222222222222</td>
<td id="_td3">333333333333333333333333333333333</td>
<td id="_td4">44444444444444444444444444444444444444444</td>
</tr>
<tr>
<td>111111111</td>
<td>222222222222222</td>
<td>333333333333333333</td>
<td>44444444444444444444</td>
</tr>
</table>
<table id="_table2">
<tr>
<td id="_td1">111111111111111111111</td>
<td id="_td2">22222222222222222222222222</td>
<td id="_td3">333333333333333333333333333333333</td>
<td id="_td4">44444444444444444444444444444444444444444</td>
<tr>
<td>111111111</td>
<td>222222222222222</td>
<td>333333333333333333</td>
<td>44444444444444444444</td>
</tr>
</table>