无论单元格中的文本量如何，都将表格列宽设置为常数？
Posted
技术标签:
【中文标题】无论单元格中的文本量如何，都将表格列宽设置为常数？【英文标题】：Set the table column width constant regardless of the amount of text in its cells? 【发布时间】：2011-05-26 08:14:48 【问题描述】：在我的表格中，我将列中第一个单元格的宽度设置为 100px。
但是，当该列的某个单元格中的文本太长时，该列的宽度会变得大于100px。如何禁用此扩展？
【问题讨论】：
***.com/questions/1258416/word-wrap-in-a-html-table 可能会帮助您指出正确的方向 在我的情况下，没有发生扩展，而是相反：尽管我明确声明了宽度，但宽度却出现了不必要的收缩。可笑！ 唯一正确的解决方案是使用带有 cols 的 colgroup，并设置 cols 宽度。table-layout:fixed; 是解决方案
@emfi 你是我的新神。它有效！
【参考方案1】：
我玩了一会儿，因为我很难弄清楚。
您需要设置单元格宽度（th 或 td 有效，我都设置了）并将table-layout 设置为fixed。出于某种原因，单元格宽度似乎只有在设置了表格宽度时才保持固定（我认为这很愚蠢，但无论如何）。
此外，将overflow 属性设置为hidden 以防止任何额外的文本出现在表格之外很有用。
您也应该确保为 CSS 保留所有边框和大小。
好的，这就是我所拥有的：
table
border: 1px solid black;
table-layout: fixed;
width: 200px;
th,
td
border: 1px solid black;
width: 100px;
overflow: hidden;
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>Here it is in JSFiddle
这家伙也有类似的问题：Table cell widths - fixing width, wrapping/truncating long words
【讨论】：
注意这一点很重要：“浏览器将根据表格第一行中单元格的宽度设置列宽”，来自***.com/questions/570154/… 当表格宽度不固定时它确实有效。 jsfiddle.net/lavinski/CGCFW/3你只需要一个动态行来占用剩余空间。 @DanielLittle 或者您可以将表格宽度设置为 1px；overflow: visible 用于动态大小的表格，只要单元格的大小是固定的并且溢出是可见的，表格本身的大小是否大于或小于实际单元格都没有关系。
如果你的 td 有 "width=30%;" 你会怎么做？
如果表格有width，即使使用table-layout: fixed，列宽也不会固定，因为如果所有列宽的总和小于，某些列会被放大以填充表格宽度比桌子宽度。为避免这种情况，您需要以下 @MitjaGustin answer 的建议。但是，如果您指定所有列的宽度，那么也没有必要指定表格宽度。【参考方案2】：
我在要设置最小宽度的单元格中使用 ::after 元素，而不管文本是否存在，如下所示：
.cell::after
content: "";
width: 20px;
display: block;
我不必在父表上设置宽度，也不必使用表布局。
【讨论】：
【参考方案3】：设置：
style="min-width:100px;"
为我工作。
【讨论】：
【参考方案4】：根据我的回答here，也可以使用表头（可以为空）并为每个表头单元格应用相对宽度。表格主体中所有单元格的宽度将与其列标题的宽度一致。示例：
HTML
<table>
<thead>
<tr>
<th ></th>
<th ></th>
<th ></th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table
width: 600px;
border-collapse: collapse;
td
border: 1px solid #999999;
View Result
或者，按照 Hyathin 的回答中的建议使用 colgroup。
【讨论】：
【参考方案5】：当小于固定宽度时，让接受的答案响应小屏幕。
HTML：
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
th, td
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
JS 小提琴
https://jsfiddle.net/w9s3ebzt/
【讨论】：
【参考方案6】：我发现 KAsun 的答案使用 vw 而不是 px 效果更好，如下所示：
<td><div style="width: 10vw" >...............</div></td>
这是我调整列宽所需的唯一样式
【讨论】：
【参考方案7】：使用 width:auto 放入最后一个“填充单元格”也很有帮助。这将占用剩余空间，并将保留指定的所有其他维度。
【讨论】：
【参考方案8】：见： http://www.html5-tutorials.org/tables/changing-column-width/
table 标记之后，使用 col 元素。你不需要结束标签。
例如，如果您有三列：
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
【讨论】：
@Sam 你可能有一些其他问题覆盖它，例如 CSS、内联样式或不正确的文档类型等。这绝对有效，它是设置列样式的标准方法。 我不确定这是否是“HTML5 方式”。 html5 中的 colgroup/col 似乎只真正用于标记跨度。 MDN 没有提到在 col 标记上使用 style 属性（除了它从全局属性继承它），只提到 bgcolor：“......在相关的table-layout: fixed; width: 100%;。谢谢！
这不是最终的/确定的，但 w3schools 也没有提到为此使用col。它建议使用 css 应用于 <td>（或 <th>） - w3schools.com/tags/att_td_width.asp
@Hyathin 您的解决方案对我来说就像一个魅力（谢谢） - 不需要额外的努力。但其他人可能会根据他们的情况而有所不同。或者，也许 HTML5 现在在 2017 年更加稳定。
您无需设置"fixed" - 您只需设置overflow:hidden，因为已设置列宽。
【讨论】：
这会将内容隐藏在单元格边框后面，这不是一个好主意。【参考方案10】：我用过这个
.app_downloads_table tr td:first-child
width: 75%;
.app_downloads_table tr td:last-child
text-align: center;
【讨论】：
不要忘记 ntch-child(2)（或 3、4 等） table td nth-child(n+1) ... 将覆盖除第一列以外的所有列 我们是否应该设置表格布局：固定；或显示：表格；为了让这个 td:first-child 和 nth-child(n) 选择器工作的 table 元素？【参考方案11】：你需要在对应的CSS里面写这个
table-layout:fixed;
【讨论】：
带有 div 标签的更好的 sorround 表，然后在 div 中使用 overflow:auto 当我将它与列组组合时为我工作：我做的是：
设置td宽度：
<td ><!--blaBlaBla Contents here--></td>
用 CSS 设置 td 宽度：
<td style="width:200px; height:50px;">
使用 CSS 再次将宽度设置为最大和最小：
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
这听起来有点重复，但它给了我想要的结果。为了更轻松地实现这一点，您可能需要将 CSS 值放在样式表中的一个类中：
.td_size
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
然后：
<td class="td_size">
将类属性放置到您想要的任何<td>。
【讨论】：
这是唯一一种似乎在所有情况下都有效且不会施加额外的、可能不需要的限制的解决方案。【参考方案13】：如果您需要一个或多个固定宽度列而其他列需要调整大小，请尝试将min-width 和max-width 设置为相同的值。
【讨论】：
当使用table-layout: fixed; 明确设置宽度时，这对我有用。
天哪！其他解决方案都不起作用或太笨重！这非常有效！也不需要 div！【参考方案14】：
KAsun 的想法是正确的。这是正确的代码...
<style type="text/css">
th.first-col > div,
td.first-col > div
overflow:hidden;
white-space:nowrap;
width:100px
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
【讨论】：
【参考方案15】：只需在<td> 内添加<div> 标签或<th> 在<div> 内定义宽度。
这将对您有所帮助。没有其他工作。
例如。
<td><div style="width: 50px" >...............</div></td>
【讨论】：
为了安全起见，我将此解决方案与为相同像素宽度指定最小宽度/最大宽度相结合。最后它的工作。我不知道为什么我必须运行所有这些额外的回合才能让它真正修复，荒谬...... 不确定这比在<td> 上设置相同的 css style="width: 50px" 更好
@mmcrae 更好，因为它可以工作，在<td> 上设置宽度不起作用。
荒谬，但对我来说，结合display:inline-block; word-break:break-word; 是最简单的工作解决方案。
像魅力一样工作！似乎是在强制“td”的宽度【参考方案16】：
如果您不想要固定的布局，请为列指定一个适当大小的类。
CSS：
.special_column width: 120px;
HTML：
<td class="special_column">...</td>
【讨论】：
以上是关于无论单元格中的文本量如何，都将表格列宽设置为常数？的主要内容，如果未能解决你的问题，请参考以下文章