Html 如何在 TBody 中将 TH Header 与 TD 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12153125/
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
How to align TH Header with TD in TBody
提问by George Hernando
I'm having problems trying to embed a table in an existing HTML page with some CSS.
我在尝试使用一些 CSS 在现有 HTML 页面中嵌入表格时遇到问题。
This CSS is hiding the header of the table by default with a style definition like:
默认情况下，此 CSS 使用如下样式定义隐藏表格的标题：
.tablestuff thead {
display: none;
}
But I want the table to show, so I tried setting the style on the thead element with "display:block" (with javascript). That makes the header display, but the columns of the header don't line up with the td columns.
但我希望表格显示出来，所以我尝试使用“display:block”（使用 javascript）设置 thead 元素上的样式。这使标题显示，但标题的列不与 td 列对齐。
I have reduced my HTML to the following (hopefully with minimal typos) and showing the style on the thead element as set by javascript.
我已将我的 HTML 简化为以下内容（希望拼写错误最少）并显示由 javascript 设置的 thead 元素上的样式。
<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>
How can I make both the header show and also align correctly with the td columns?
如何使标题显示并与 td 列正确对齐？
回答by aroth
CSS includes more display modes than the commonly used none, inline, inline-block, and block. There are quite a few, in fact.
CSS包括比所述通常使用的多个显示模式none，inline，inline-block，和block。事实上，有不少。
In this case, it appears what you want to use instead of display:block;is display:table-header-group;.
在这种情况下，您想要使用的似乎display:block;是display:table-header-group;。
Here are some examples of the different styles, as applied to your table:
以下是应用于您的表格的不同样式的一些示例：
回答by Clyde Lobo
The problem is caused by the display:blockin the style attribute for the thead.
该问题是由display:blockthead 的 style 属性引起的。
Change it to display:table-header-group
将其更改为 display:table-header-group
回答by 1990rk4
To set same width for table header and table body in table:
为表格中的表格标题和表格正文设置相同的宽度：
<table style="table-layout:fixed">
回答by Lucas Green
When you want to show the thead element use this value: display: table-header-group;
当您想显示 thead 元素时，请使用此值： display: table-header-group;
回答by marc_ferna
Maybe the content of the THs is wider than the content of the TDs and in reality the width is not 20px as set.
也许 THs 的内容比 TDs 的内容宽，实际上宽度不是设定的 20px。
So, because you first load the page without the thead, the table gets the width of the TDs. Then, when you display the THEAD by js, the table width continues being the same but probably the THs have different width.
因此，因为您首先加载没有 thead 的页面，所以表格会获得 TD 的宽度。然后，当您通过 js 显示 THEAD 时，表格宽度继续相同，但可能 THs 具有不同的宽度。
回答by Nithin Emmanuel
show and hide th instead of thead with the css
使用 css 显示和隐藏 th 而不是 thead
/* to hide */
.tablestuff thead th{
display: none;
}
/* to show */
.tablestuff thead th{
display: table-cell;
}
