相信大家在布局表格的时候,经常会遇到表格不受控制的情况,而有时候我们布局的需要还是离不开使用表格,其实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;注释掉再看看效果
评论前必须登录!
注册