一些背景知识，我正在尝试实现其中的最少部分，以便从此演示中获取固定的报告标题: http://www.imaputz.com/cssStuff/bigFourVersion.html
除了我的标题行(我有多个标题行)没有与下面的单元格垂直排列外，我可以正常工作。我已将所有单元格的宽度设置为与此 css 相同:
td {
width: 100px;
}
th {
width: 100px;
}
改变第 th 个宽度确实有影响，但出于某种原因，它们没有获得 100 像素的宽度。由于某种原因，从标题行到标题行的宽度不同。 如何强制所有单元格的宽度相同？
下面是其余的 CSS。我正在使用 firefox 进行测试，并试图让卡住的标题与尽可能少的 CSS 一起工作。链接示例中的一些 CSS 非常特定于该布局，我正在尝试解决一些问题，以便对不同数量的列/行进行任何编辑。它目前正在工作，但单元格并未全部对齐。
#reportPlace table thead tr {
display: block;
}
#reportPlace table tbody {
display: block;
height: 262px;
overflow: auto;
}
注意:如果我同时删除 display: block 样式，它会解决列宽问题，但标题行将不再卡住。
中途将其解雇。我在整个表格上设置了 block 显示，而不是在每个元素和主体上，现在所有的列都排成一行。因为多行标题中的每一行都有单独的 block 集，所以它们独立地自动调整宽度。但是，宽度设置仍然被忽略，我需要它来格式化报告。
#reportPlace table /*thead tr*/ {
display: block;
}
#reportPlace table tbody {
/* display: block;*/
height: 262px;
overflow: auto;
}
示例 HTML:
<!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>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="reportPlace">
<table border="0">
<thead>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>Fruits</span>
</th>
<th class="titleTopLockedCell">
<span>Vegitables</span>
</th>
</tr>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>Original</span>
</th>
<th class="titleTopLockedCell">
<span>Original</span>
</th>
</tr>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>2009</span>
</th>
<th class="titleTopLockedCell">
<span>2009</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titleLeftLockedCell">
<span>1-02</span>
</td>
<td class="valueCell">
<span>65412 </span>
</td>
<td class="valueCell">
<span>16542 </span>
</td>
</tr>
<tr>
<td class="titleLeftLockedCell">
<span>1-03</span>
</td>
<td class="valueCell">
<span>456052 </span>
</td>
<td class="valueCell">
<span>1654652 </span>
</td>
</tr>
<tr>
<td class="titleLeftLockedCell">
<span>1-04</span>
</td>
<td class="valueCell">
<span>564654 </span>
</td>
<td class="valueCell">
<span>654654 </span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
最佳答案
我需要使用 min-width:100px 样式而不是 width 样式。
此后我发现的其他问题包括需要 CSS table { table-layout: fixed;宽度:100%； } 因为表格需要为列设置宽度以符合宽度。
第一行包含任何 colspan 也可能是一个问题，因此我在第一行中包含一个额外的行，它没有边框和 0 高度(基本上不可见)并且有单独的单元格(没有 colspan)，这样宽度就可以由第一行“假”行确定，然后第二行带有 colspan 的行不会造成问题。请注意，您不应该将填充/边距设为 0，因为您希望第一行与其他行具有相同的宽度，以便正确建立宽度:
<tr class='scaffolding'>...</tr>
tr.scaffolding, .scaffolding td {
border:none;
padding-top:0;
padding-bottom:0;
height:0;
margin-top:0;
margin-bottom:0;
visibility:hidden;
}
关于html - th 宽度不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5971208/