Table固定宽度

最新推荐文章于 2024-12-03 09:44:42 发布

weixin_30469895

最新推荐文章于 2024-12-03 09:44:42 发布

阅读量524

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nba4523/archive/2013/04/15/3021663.html

本文介绍了如何在HTML中创建固定宽度的表格，并详细说明了三种不同的方法来实现这一目标。第一种方法仅设置表格宽度，第二种方法结合使用table-layout和word-break属性避免内容超出，第三种方法则通过设置text-overflow和overflow属性来隐藏超出的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般的在使用table的时候都需要固定其宽度，单位px（像素）。

1、如果只是指定其宽度width，当内容增加的时候，表格的宽度会随着内容延长的，如下：

<table width="200px" border="1"> <tr> <td>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td> </tr> </table> 效果如下： Table固定宽度 - 星星 - 希夷之家

不能达到预期效果 2、可以设置style中的“table-layout”为“fixed” 和“word-break”为“break-all”

<table width="200px" border="1" style="table-layout: fixed; word-break:break-all"> <tr> <td>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td> </tr> </table>

效果如下：

3、如果要求不要换行，则只能隐藏一部分内容了，设置table的style中的“table-layout”为“fixed” 并设置td的style为“text-overflow”为“ellipsis”和“ overflow”为“hidden” <table width="200px" border="1" style="table-layout: fixed;"> <tr> <td style="text-overflow:ellipsis; overflow: hidden;">TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td> </tr> </table>

效果如下： Table固定宽度 - 星星 - 希夷之家