无论单元格中的文本数量如何设置表格列的宽度不变？
在我的表格中，我将列中第一个单元格的宽度设置为100px 。
但是，如果此列中某个单元格中的文本太长，则列的宽度将变得超过100 100px 。 我怎么能禁用这个扩展？
我玩了一下，因为我很难搞清楚。
您需要设置单元格宽度（th或td工作，我都设置），并将table-layout设置为fixed 。 出于某种原因，单元格宽度似乎只能保持固定，如果表宽度也设置（我认为这是愚蠢的，但whatev）。 将overflow属性设置为隐藏也是有用的。
你应该确保离开CSS的所有边界和大小。
好吧，这就是我所拥有的。
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; width: 200px; } th, td { border: 1px solid black; width: 100px; }
这里是JSFiddle
这家伙有一个类似的问题： 表单元格宽度 – 固定宽度，包装/截断长词
只需在<div>添加<div>标签或<div>定义宽度。 这将帮助你。 没有别的工作。
例如。
<td><div style="width: 50px" >...............</div></td>
请参阅： 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>
如果您需要一个或多个固定宽度列，而其他列需要resize，请尝试将min-width和max-width设置为相同的值。
你需要在相应的CSS里写这个
table-layout:fixed;
我所做的是：
-
设置td宽度：
<td width="200" height="50"><!--blaBlaBla Contents here--></td> -
用CSS设置td宽度：
<td style="width:200px; height:50px;"> -
使用CSS再次设置宽度为max和min：
<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">
把class属性放到你想要的任何<td> 。
我用这个
.app_downloads_table tr td:first-child { width: 75%; } .app_downloads_table tr td:last-child { text-align: center; }
它也有帮助，把最后一个“填充单元”，与宽度：自动 。 这将占据剩余的空间，并将按照规定离开所有其他尺寸。
如果你不想要一个固定的布局，指定一个类的大小适当的列。
CSS：
.special_column { width: 120px; }
HTML：
<td class="special_column">...</td>
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>
当小于固定宽度时，使被接受的答案响应小屏幕。
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小提琴
我发现KAsun的答案更好地使用VW而不是像这样的PX ：
<td><div style="width: 10vw" >...............</div></td>
这是我需要调整列宽的唯一样式
你不需要设置"fixed" – 所有你需要的是设置overflow:hidden因为列的宽度设置。
