首页 > 代码库 > css控制table的td宽度

css控制table的td宽度

2024-09-23 05:11:39   217人阅读

今天发现即使设置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的属性超出隐藏（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宽度


联系
我们