如何使用 CSS 或事件 HTML 限制表格的宽度？

Posted 2023-03-06

【中文标题】如何使用 CSS 或事件 HTML 限制表格的宽度？

【英文标题】：How limit the width of a table with CSS or event HTML?

【发布时间】：2012-05-24 16:11:43

【问题描述】：

我很好奇这是否可以通过 CSS 甚至 html 实现？比如说，我有一个包含 TABLE 的父 DIV：

<div class="divClass">
<table class="tableClass">
</table>
</div>

表格显示用户内容，因此我无法控制其文本。有没有办法限制表格的宽度，使其不会超过，比如 750 像素？

附言。通常，如果没有足够的宽度，表格单元格会将单词换行到下一行，但是 WordsLikeThisWithoutAnyActualWhiteSpacesBetweenThem 会出现问题。在这种情况下，表格会变得太宽并破坏页面布局。

【参考方案1】：

.tableClass 
   max-width: 750px
   word-break: break-all;
 

应该做的工作。

或者你也可以试试

.tableClass 
   table-layout:fixed;

.tableClass td 
   overflow: hidden;

并为第一行中的每个 tds 分配宽度。

【讨论】：

非常感谢。断词：打破一切；成功了。所有其他答案也都很好。

【参考方案2】：

这样写：

.tableClass
 display-layout:fixed;
 word-wrap: break-word;

【参考方案3】：

tdword-wrap:break-word;
max-width: 750px;