站长资源
中国站长网站

表格的宽高设置完不起作用

相信大家在布局表格的时候,经常会遇到表格不受控制的情况,而有时候我们布局的需要还是离不开使用表格,其实css帮我准备了很多的针对table的用法,我其中一篇动态元素垂直水平居中也是对此很好的一个应用:http://www.wangdahai.cn/251.html

今天我们重点来讲解table-layout,这东西有什么用,能做什么事,在什么样的场景下需要使用它。

场景一:

我们在写table的时候,里面有的内容很多,有的很少,这时候我们给表格设置宽度,发现它并没有起到很好的效果,这时候我们就可以使用

table
  {
  table-layout:fixed;
  }

table-layout: fixed的作用在于,让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

我们来假设一个具体的案例场景:

假如表格有三列,每列的内容长短不一且有长串连续英文,我们需要把表格的每列设置固定宽度,超出的部分溢出隐藏以…代替,代码如下:

<style>  
    *{padding:0;margin:0;font-size: 12px;color: #333}  
    li{list-style: none;}  
  
    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}  
    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}  
  
    .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}  
</style>  
  
<table width="400" border="1" id="table1">  
        <tr>  
            <td>3</td>  
            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>  
            <td width="40%">5</td>  
        </tr>  
        <tr>  
            <td>3</td>  
            <td>4</td>  
            <td>5</td>  
        </tr>  
</table>  

大家可以尝试着把table-layout: fixed;注释掉再看看效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 表格的宽高设置完不起作用

评论 抢沙发

评论前必须登录!