table-layout：在Internet Explorer中固定打破大表 [英] table-layout: fixed in Internet Explorer breaks large tables
问题描述
我似乎偶然发现了一个错误（至少我认为是这样）。
I seem to have stumbled upon a bug (or at least I think so). The bug occurs in Internet Explorer 7 and Internet Explorer 8 in "compatible mode".
这是一个测试页面，可以重现错误：
Here is a test-page which reproduces the bug:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table { width: 900px; table-layout: fixed; }
.gray th, .gray td { background-color: #c2c2c2; }
.width200 { width: 200px; }
.width50 { width: 50px; }
</style>
</head>
<body>
<form runat="server">
<table cellpadding="0" cellspacing="0">
<thead>
<tr> <!-- When using "table-layout: fixed" the first row
serves as a guide to the width of the following
columns -->
<th class="width200"></th>
<th class="width200"></th>
<th class="width200"></th>
<td></td>
<td class="width50"></td>
<td class="width50"></td>
</tr>
<tr>
<th>---</th>
<th>---</th>
<th>---</th>
<td>///</td>
<td>///</td>
<td>///</td>
</tr>
</thead>
<tbody>
<% for (var i = 0; i <= 5000; i++) { %>
<tr class="gray">
<th>---</th>
<th>---</th>
<th>---</th>
<td>///</td>
<td>///</td>
<td>///</td>
</tr>
<% } %>
</tbody>
<tfoot>
<tr>
<th>---</th>
<th>---</th>
<th>---</th>
<td>///</td>
<td>///</td>
<td>///</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
会发生什么的屏幕截图：
Here's a screenshot of what happens:
http：// roosteronacid.com/ie_table-layout.jpg
有任何解决方法吗？
推荐答案
我有点担心你的标记的语义，并想知道是否是什么导致你的问题（默认样式表没有重写）。为什么在表头有任何td标签？为什么在身体和脚的桌子有Th标签？根据[w3c reccomendation] [1]：
I'm a bit concerned about the semantics of your markup, and wonder if that is what is causing your problem (default stylesheet not overridden). Why is there any td tags in the table head? and why are there th tags in the body and foot of the table? According to the [w3c reccomendation][1]:
TH用于标题，TD用于数据，
TH is for headers, TD for data, but for cells acting as both use TD
脚也应该在正文之前（这可能是主要原因）。
The foot should also be before the body (this may be the main cause).
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table { width: 900px; table-layout: fixed; }
.gray td { background-color: #c2c2c2; }
.width200 { width: 200px; }
.width50 { width: 50px; }
</style>
</head>
<body>
<form runat="server">
<table cellpadding="0" cellspacing="0">
<thead>
<tr> <!-- When using "table-layout: fixed" the first row
serves as a guide to the width of the following
columns -->
<th class="width200"></th>
<th class="width200"></th>
<th class="width200"></th>
<th></th>
<th class="width50"></th>
<th class="width50"></th>
</tr>
<tr>
<th>---</th>
<th>---</th>
<th>---</th>
<th>///</th>
<th>///</th>
<th>///</th>
</tr>
</thead>
<tfoot>
<tr>
<td>---</td>
<td>---</td>
<td>---</td>
<td>///</td>
<td>///</td>
<td>///</td>
</tr>
</tfoot>
<tbody>
<% for (var i = 0; i <= 5000; i++) { %>
<tr class="gray">
<td>---</td>
<td>---</td>
<td>---</td>
<td>///</td>
<td>///</td>
<td>///</td>
</tr>
<% } %>
</tbody>
</table>
</form>
</body>
</html>
这篇关于table-layout：在Internet Explorer中固定打破大表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：// roosteronacid.com/ie_table-layout.jpg](\"http://roosteronacid.com/ie_table-layout.jpg\"){kind=link}