今天发现即使设置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}}

 

 

 

 

posted on 2017-05-18 17:42  qinbb  阅读(15762)  评论(0编辑  收藏  举报