如何用CSS控制表格每列的宽度?
展开全部
如果是简单的表格,直上直下没有跨列或者跨行的:
td { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } /* 设置不换行 省略号显示*/
然后只需要再给第一行的td分别加上class,例如:
<tr>
<td class="item1">单元格</td>
<td class="item2">单元格</td>
<td class="item3">单元格</td>
<td class="item4">单元格</td>
<td class="item5">单元格</td>
<td class="item6">单元格</td>
</tr>
然后,分别设置宽度
.item1 { width:20% }
....
.item6 { width:5% }
其他行同列的单元格会被撑开
比较复杂的有跨列或者跨行的表格,设置方法类似,但是就是要计算一下,比较麻烦。
td { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } /* 设置不换行 省略号显示*/
然后只需要再给第一行的td分别加上class,例如:
<tr>
<td class="item1">单元格</td>
<td class="item2">单元格</td>
<td class="item3">单元格</td>
<td class="item4">单元格</td>
<td class="item5">单元格</td>
<td class="item6">单元格</td>
</tr>
然后,分别设置宽度
.item1 { width:20% }
....
.item6 { width:5% }
其他行同列的单元格会被撑开
比较复杂的有跨列或者跨行的表格,设置方法类似,但是就是要计算一下,比较麻烦。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询