css控制table的td宽度

时间:2022-06-18 21:26:50

今天发现即使设置table的td、th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th、td丢失。

  • 下图就是浏览器渲染的table,导致缺失“端口”这一列,因为“设备名称”中的td内容太长导致。代码:
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1" id="dvrEquipnet">
<tr>
<th scope="col" width="15%">设备ID</th>
<th scope="col" width="15%">管理服务器ID</th>
<th scope="col" width="15%">设备名称</th>
<th scope="col" width="15%">端口</th>
</tr>
<script id="test" type="text/html">
{{each data as value i}}
<tr class="_acctr">
<td >{{value.id}}</td>
<td >{{value.sid}}</td>
<td >{{value.name}}</td>
<td >{{value.subaddr}}</td>
</tr>
{{/each}}
</script>
</table>

css控制table的td宽度

  • css的属性超出隐藏(overflow:hidden;)、强制在同一行显示(white-space: nowrap;)、省略号(text-overflow:ellipsis;),光有这些是不行的,要设置td的最大宽度(max-width: 30px),以及添加tilte的属性,当鼠标放上去被隐藏的内容就可以看到。
td {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
max-width: 30px;
}
{{each data as value i}}
<tr class="_acctr">
<td >{{value.id}}</td>
<td >{{value.sid}}</td>
<td title="{{value.name}}">{{value.name}}</td>
<td >{{value.subaddr}}</td>
</tr>
{{/each}}

css控制table的td宽度