css实现table表格固定td固定宽度

来源:网络 文章列表 2023-08-11 8
table-layout CSS属性定义了用于布局表格单元格,行和列的算法。 初始值为auto //大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 fixed://表格和列的

table-layout CSS属性定义了用于布局表格单元格,行和列的算法。

初始值为auto //大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

fixed://表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

当用table百分比布局时, 如果td中的内容超过了td设定的宽度时想用三个点的省略号显示,常规的写法就是用css中的一些属性比如


<style>

td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

</style>

不起作用时,如果在table的css样式上加table-layout:fixed

<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
td{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    
}
</style>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

</body>
</html>

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接