Html 宽度不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5971208/
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
th width not working?
提问by AaronLS
A little background, I am trying to implement the minimal amount of pieces of this to get fixed report headers from this demo: http://www.imaputz.com/cssStuff/bigFourVersion.html
一点背景，我正在尝试实现最少量的部分，以从这个演示中获取固定的报告标题：http: //www.imaputz.com/cssStuff/bigFourVersion.html
I have it working except none of my headers rows (i havemultiple header rows) line up vertically with the cells below. I have set the width of all cells to the same with this css:
除了我的标题行（我有多个标题行）与下面的单元格垂直排列之外，我让它工作。我已使用此 css 将所有单元格的宽度设置为相同：
td {
width: 100px;
}
th {
width: 100px;
}
And changing the th width does have an impact, but for some reason they are not getting a width of 100 pixels. From header row to header row the widths are different for some reason. How can I force all the cells to the same width?
更改 th 宽度确实会产生影响，但由于某种原因，它们没有获得 100 像素的宽度。由于某种原因，从标题行到标题行的宽度不同。 如何强制所有单元格的宽度相同？
Below is the rest of the CSS that is in place. I am testing with firefox and trying to get the frozen headers to work with as little CSS. Some of the CSS in the linked example is very specific to that layout, and I am trying to work something out that will work with any editing for varying numbers of columns/rows. It currently is working with the exception that the cells are not all aligned.
下面是其余的 CSS。我正在使用 firefox 进行测试，并试图让冻结的标头使用尽可能少的 CSS。链接示例中的一些 CSS 非常特定于该布局，我正在尝试解决一些问题，以便对不同数量的列/行进行任何编辑。它目前正在工作，但单元格并非全部对齐。
#reportPlace table thead tr {
display: block;
}
#reportPlace table tbody {
display: block;
height: 262px;
overflow: auto;
}
NOTE: If I remove both display: blockstyles it fixes the issue with the column widths, but then the header rows are no longer frozen.
注意：如果我删除这两种display: block样式，它会修复列宽的问题，但标题行不再冻结。
Fired it out part way. I set block display on the entire table, instead of on each th element and and body, and now all the columns line up. Because each th row in the multiple row header had block set seperately, they were autosizing width independently. However, the width setting is still ignored and I'm gonna need that to format the report.
将它部分发射出去。我在整个表格上设置块显示，而不是在每个元素和正文上，现在所有列都排成一行。因为多行标题中的每一行都单独设置了块，所以它们独立地自动调整宽度。但是，宽度设置仍然被忽略，我需要它来格式化报告。
#reportPlace table /*thead tr*/ {
display: block;
}
#reportPlace table tbody {
/* display: block;*/
height: 262px;
overflow: auto;
}
Sample HTML:
示例 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>
回答by AaronLS
I needed to use the min-width:100pxstyle instead of the widthstyle.
我需要使用min-width:100px样式而不是width样式。
Other issues I've found since include requiring CSS table { table-layout: fixed; width:100%; }as tables require a width be set for the columns to respect width.
我发现的其他问题包括需要 CSS，table { table-layout: fixed; width:100%; }因为表格需要为列设置宽度以尊重宽度。
Having a first row which contains any colspancan also be an issue, so I include an additional row as the first row which has no border and 0 height(essentially invisible) and has individual cells(no colspans) so that widths can be established by that first "fake" row, and then the second row with colspan's doesn't cause an issue. Note that you shouldn't 0 out the padding/margin as you'd want that first row to have the same as other rows so that widths are properly established:
第一行包含 anycolspan也可能是一个问题，所以我包括一个额外的行作为第一行，它没有边框和 0 高度（基本上不可见）并且有单独的单元格（没有 colspans），这样宽度可以通过第一个“假”行，然后是 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;
}
