Html 无论单元格中的文本数量如何，都将表格列宽设置为常量吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4457506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set the table column width constant regardless of the amount of text in its cells?
提问by Misha Moroshko
In my table I set the width of the first cell in a column to be 100px.
However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px. How could I disable this expansion?
在我的表格中，我将列中第一个单元格的宽度设置为100px.
但是，当该列中的一个单元格中的文本太长时，该列的宽度将变得大于100px。我怎么能禁用这个扩展？
回答by ptpaterson
I played with it for a bit because I had trouble figuring it out.
我玩了一会儿，因为我无法弄清楚它。
You need to set the cell width (either thor tdworked, I set both) AND set the table-layoutto fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).
您需要设置单元格的宽度（无论是th还是td工作，我都设置），并设置table-layout到fixed。出于某种原因，如果设置了表格宽度，单元格宽度似乎也只保持固定（我认为这很愚蠢，但无论如何）。
Also, it is useful to set the overflowproperty to hiddento prevent any extra text from coming out of the table.
此外，设置overflow属性hidden以防止任何额外的文本从表格中出来也很有用。
You should make sure to leave all of the bordering and sizing for CSS, too.
您也应该确保为 CSS 保留所有边框和大小。
Ok so here's what I have:
好的，这就是我所拥有的：
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>This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words
这家伙有一个类似的问题：表格单元格宽度 - 固定宽度，换行/截断长字
回答by Hyathin
See: http://www.html5-tutorials.org/tables/changing-column-width/
请参阅：http: //www.html5-tutorials.org/tables/changed-column-width/
After the table tag, use the col element. you don't need a closing tag.
在 table 标签之后，使用 col 元素。你不需要结束标签。
For example, if you had three columns:
例如，如果您有三列：
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
回答by KAsun
Just add <div>tag inside <td>or <th>define width inside <div>.
This will help you. Nothing else works.
只需在<div>里面添加标签<td>或在里面<th>定义宽度<div>。这会帮助你。没有其他工作。
eg.
例如。
<td><div style="width: 50px" >...............</div></td>
回答by scrrr
If you need one ore more fixed-width columns while other columns should resize, try setting both min-widthand max-widthto the same value.
如果你需要一个或多个固定宽度的列，而其他列应该调整，尝试设置都min-width与max-width相同的值。
回答by vinoth kumar
You need to write this inside the corresponding CSS
你需要在相应的CSS里面写这个
table-layout:fixed;
回答by ErickBest
What I do is:
我要做的是：
Set the td width:
<td width="200" height="50"><!--blaBlaBla Contents here--></td>Set the td width with CSS:
<td style="width:200px; height:50px;">Set the width again as max and min with CSS:
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
设置 td 宽度：
<td width="200" height="50"><!--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;">
It sounds little bit repetitive but it gives me the desired result. To achieve this with much ease, you may need put the CSS values in a class in your style-sheet:
这听起来有点重复，但它给了我想要的结果。为了更轻松地实现这一点，您可能需要将 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*/
}
then:
然后：
<td class="td_size">
Place the class attribute to any <td>you want.
将 class 属性放置到<td>您想要的任何位置。
回答by Svetoslav Marinov
I used this
我用过这个
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
回答by mcdado
If you don't want a fixed layout, specify a class for the column to be size appropriately.
如果您不想要固定布局，请为列指定一个类以使其具有适当的大小。
CSS:
CSS：
.special_column { width: 120px; }
HTML:
HTML：
<td class="special_column">...</td>
回答by Priyanka Arora
Setting this:
设置这个：
style="min-width:100px;"
Worked for me.
为我工作。
回答by Mitja Gustin
It also helps, to put in the last "filler cell", with width:auto. This will occupy remaining space, and will leave all other dimensions as specified.
使用width:auto放入最后一个“填充单元格”也有帮助。这将占用剩余空间，并将保留所有其他尺寸。
