20

我在尝试使用一些 CSS 将表格嵌入现有 HTML 页面时遇到问题。

默认情况下，此 CSS 隐藏表格的标题，其样式定义如下：

.tablestuff thead {
     display: none;
}

但我希望表格显示，所以我尝试使用“display：block”（使用javascript）在thead元素上设置样式。这使得标题显示，但标题的列不与 td 列对齐。

我已将我的 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>

如何使标题显示并与 td 列正确对齐？

4

8 回答 8

43

CSS 包含比常用的 、 、 和 更多none的inline显示inline-block模式block。事实上，有不少。

在这种情况下，您想使用的是什么而不是display:block;is display:table-header-group;。

以下是应用于您的表格的不同样式的一些示例：

http://jsfiddle.net/CrYdz/1

于 2012-08-28T05:23:26.210 回答
10

问题是由display:blockthead 的样式属性引起的。

将其更改为display:table-header-group

于 2012-08-28T05:23:40.520 回答
5

当您想显示 thead 元素时，请使用此值：display: table-header-group;

于 2012-08-28T05:22:52.247 回答
4

为表格中的表格标题和表格主体设置相同的宽度：

<table style="table-layout:fixed">
于 2014-11-18T11:27:15.637 回答
0

也许 TH 的内容比 TD 的内容更宽，实际上宽度不是设置的 20 像素。

因此，因为您首先加载页面时没有使用thead，所以表格会获得 TD 的宽度。然后，当您通过 js 显示 THEAD 时，表格宽度仍然相同，但可能 TH 具有不同的宽度。

于 2012-08-28T05:24:36.417 回答
0

默认情况下，th应该td对齐。如果您想将其保留为默认值，只需输入display: unset：

.tablestuff thead {
     display: unset;
}

纯 JavaScript：

document.querySelector("thead").style.display = "unset";

jQuery：

要使 jQuery 的$(".tablestuff thead").show()方法起作用，您css需要像这样定义：

.tablestuff thead[style*='display: block'] {
    display: unset !important;
}

这是因为默认情况下.show()将设置display为block。上面css将它设置回unset每当它设置为block.

于 2020-09-07T10:56:40.303 回答
0

万一没有什么能解决它。将您的<tr>内部移动thead到tbody.

这是我的唯一解决方案，因为我已经有很多并发症了。

于 2021-09-04T15:15:43.567 回答
-1

使用 css 显示和隐藏 th 而不是 thead

/* to hide */
.tablestuff thead th{
     display: none;
}

/* to show */
.tablestuff thead th{
     display: table-cell;
}
于 2012-08-28T05:25:28.723 回答