您的位置: 首页> JavaScrip> css实现table表格固定td固定宽度

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

时间:2023-10-25 16:28:53 来源:互联网

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>
宽度 td table css
上一篇:JS鼠标禁止右键禁止打开控制台及键盘禁用 下一篇:Vue自定义名称下载PDF的方法

相关文章

相关应用

最近更新