Question

我在尝试使用某些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列正确对齐？

Answer 1

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

在这种情况下，您希望使用的是display:block;而不是display:table-header-group;。{/ p>

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

http://jsfiddle.net/CrYdz/1

Answer 2

问题是由thead的style属性中的display:block引起的。

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

Answer 3

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

<table style="table-layout:fixed">

Answer 4

如果要显示thead元素，请使用以下值：display: table-header-group;

Answer 5

可能TH的内容比TD的内容宽，实际上宽度不是20px。

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

Answer 6

默认情况下，class User(AbstractBaseUser, PermissionsMixin): email = models.EmailField(max_length=32, unique=True) name = models.CharField(primary_key=True, max_length=64, unique=True) is_staff = models.BooleanField(default=False) is_superuser = models.BooleanField(default=False) is_active = models.BooleanField(default=True) date_joined = models.DateTimeField(auto_now_add=True) USERNAME_FIELD = 'email' EMAIL_FIELD = 'email' REQUIRED_FIELDS = [] objects = CustomUserManager() def __str__(self): return self.email和th应该对齐。如果要将其保留为默认设置，只需输入td：

display: unset

普通JavaScript：

.tablestuff thead {
     display: unset;
}

jQuery：

要使jQuery的document.querySelector("thead").style.display = "unset";方法有效，您的$(".tablestuff thead").show()必须按以下方式定义：

css

这是因为默认情况下.tablestuff thead[style*='display: block'] { display: unset !important; }会将.show()设置为display。每当设置为block时，上述css会将其重新设置为unset。

Answer 7

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

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

/* to show */
.tablestuff thead th{
     display: table-cell;
}

如何在TBody中将TH标头与TD对齐

7 个答案:

普通JavaScript：

jQuery：