表格固定布局

这是一个简单的布局属性,内容如题。
本文主要讲解一个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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值