IE 中的 HTML 表格宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3035322/
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
HTML Table width in IE?
提问by Harish Kurup
I am using table to display a set of data, my HTML code goes here...
我正在使用 table 来显示一组数据，我的 HTML 代码在这里......
<table border="1" cellspacing="0" cellpadding="0" style="width: 780px;">
<tbody>
<tr>
<td style="width: 780px; height: 25px;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
<tr>
<td style="width: 780px; height: 25px;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
</tbody>
</table>
this table works ok in firefox, safari, and IE8. But the problem arise in IE7, IE6.. asthe table expands and goes out of the screen(i.e expands towards right hand side in x-axis).... is there any hack to fix it?
此表在 Firefox、safari 和 IE8 中工作正常。但是问题出现在 IE7、IE6 中......随着表格展开并离开屏幕（即在 x 轴上向右侧扩展）......是否有任何黑客可以修复它？
the screen shots of IE6 in IETester:
IETester 中 IE6 的屏幕截图：
采纳答案by Harish Kurup
The problem is solved, as I used the code as
问题解决了，因为我用的代码
<table border="1" cellspacing="0" cellpadding="0" width="780" style="table-layout:fixed">
<col width="780">
<tbody>
<tr>
<td style="width: 780px; height: 25px; overflow:hidden;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
<tr>
<td style="width: 780px; height: 25px; overflow:hidden;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
</tbody>
</table>
in the above code there are three changes...
在上面的代码中有三个变化......
- in the table tag the width attribute is set(instead setting it in style attribute)
- col tag is set with the width as same as the table width
- and in TD's style the overflow is set to hidden,(overflow:hidden).
- 在表格标签中设置了宽度属性（而不是在样式属性中设置）
- col 标签设置为与表格宽度相同的宽度
- 并且在 TD 的样式中，溢出设置为隐藏（溢出：隐藏）。
I got this info from the link given below, please everyone check out... "http://www.tek-tips.com/faqs.cfm?fid=4499" and hence my problem was solved.
我从下面给出的链接中获得了此信息，请大家查看...“ http://www.tek-tips.com/faqs.cfm?fid=4499”，因此我的问题解决了。
回答by Pete
Use the CSS below and this should prevent your table exceeding the maximum size you define:
使用下面的 CSS，这应该可以防止您的表格超过您定义的最大尺寸：
table{
table-layout:fixed;
}
回答by RodeoRamsey
You can also try the style word-break: break-all;
您也可以尝试使用word-break: break-all;样式。
回答by Salil
Try
尝试
<table border="1" cellspacing="0" cellpadding="0" width="780">
回答by Fenton
I have just tested using your HTML and it looked identical in IE6, IE8 (compatibility mode) and IE8 (normal mode) as well as the same in Firefox.
我刚刚使用您的 HTML 进行了测试，它在 IE6、IE8（兼容模式）和 IE8（正常模式）中看起来相同，在 Firefox 中也相同。
Something else on your web page must be affecting the layout, so please post a full example.
您网页上的其他内容一定会影响布局，因此请发布完整示例。
This is the full example I tested.
这是我测试的完整示例。
<html>
<body>
<table border="1" cellspacing="0" cellpadding="0" style="width: 780px;">
<tbody>
<tr>
<td style="width: 780px; height: 25px;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
<tr>
<td style="width: 780px; height: 25px;">
<pre width='100' style='width: 780px; word-wrap: break-word;'>
the data goes here.....
</pre>
</td>
</tr>
</tbody>
</table>
</body>
</html>
