HTML 表格中的固定列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8905806/
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
Fixed column width in HTML table
提问by xbonez
I have an HTML table that has rows added in a PHP loop. This is what the loop body looks like
我有一个 HTML 表，其中在 PHP 循环中添加了行。这就是循环体的样子
<tr>
<td style="width:220px"><?php echo $a; ?></td>
<td style="width:150px"><?php echo $b; ?></td>
<td style="width:70px"><?php echo $c; ?></td>
<td style="width:70px"><?php echo $d; ?></td>
</tr>
The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change, and if the contents in any particular cell are too large to fit, the height should increase to accomodate.
问题是，当任何一行的第二列的内容稍大时，第二列的宽度超过150px，并且补偿第一列的宽度减小。我怎样才能防止这种情况发生。我希望宽度不改变，如果任何特定单元格中的内容太大而无法容纳，则应增加高度以适应。
回答by Bhavin Vora
you should try this CSS instruction:
你应该试试这个 CSS 指令：
td { word-wrap: break-word; }
that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.
适用于许多浏览器（是的，包括 IE 6，甚至 IE 5.5 但不是 Fx 3.0。它只能被 Fx3.5+ 识别。也适用于 Saf、Chr 和 Op，但我不知道这些的确切版本）并且不要对其他人造成任何伤害。
If table's width is still messed up, there is also:
如果表格的宽度仍然混乱，还有：
table { table-layout: fixed; }
th, td { width: some_value; }
that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.
这将迫使浏览器使用另一种表格算法，该算法不会尝试适应许多情况，包括尴尬的情况，而是坚持样式表所说的内容。
回答by Sameera Thilakasiri
<tr>
<td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td>
<td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td>
<td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td>
<td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td>
</tr>
You can try word-wrap:break-word;
你可以试试 word-wrap:break-word;
About the Property
关于物业
This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip' and ‘overflow' properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.
此属性指定如果内容超出元素的指定呈现框的边界时当前呈现的行是否应中断（这在某些方面类似于意图中的 'clip' 和 'overflow' 属性。）此属性应仅适用如果元素具有视觉渲染，是具有显式高度/宽度的内联元素，绝对定位和/或是块元素。
回答by Nadeem
You just need to add word-wrap: break-wordCSS property.
你只需要添加word-wrap: break-wordCSS 属性。
your code should look like this
你的代码应该是这样的
<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td>
回答by jerjer
You can wrapped it every tds content with a div and apply css overflow styles on each div:
您可以使用 div 将每个 tds 内容包装起来，并在每个 div 上应用 css 溢出样式：
Try this sample, you may change or add more styles or change the overflow:
试试这个示例，你可以更改或添加更多样式或更改溢出：
<style>
div.c220{ width:220px; overflow:hidden; }
div.c150{ width:150px; overflow:hidden; }
div.c70{ width:170px; overflow:hidden; }
</style>
<tr>
<td><div class="c220"><?php echo $a; ?></div></td>
<td><div class="c150"><?php echo $b; ?></div></td>
<td><div class="c70"><?php echo $c; ?></div></td>
<td><div class="c70"><?php echo $d; ?></div></td>
</tr>
回答by Rashmi Kant Shrivastwa
try this way
试试这个方法
<tr>
<td style="overflow:hidden;width:200px;"><?php echo $a; ?></td>
<td style="overflow:hidden;width:150px;"><?php echo $b; ?></td>
<td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td>
<td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td>
</tr>
or you can use style="WORD-BREAK:BREAK-ALL;in style
或者你可以style="WORD-BREAK:BREAK-ALL;在风格中使用
