Question

我有一个包含3列的表格。我想隐藏第一列标题（但保持列体完整）。我的代码如下：

HTML

<table>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>12</td>
  </tr>
</table>

CSS

th:first-child {
  display: none;
}

这会将第一个标题隐藏起来，但会导致其他标题向左移动，以填充缺少标题留下的空格。如何让它们停留在同一个地方而不是向左移动？请帮忙！

JSFiddle here

Answer 1

当您使用display:none时，整个<th>会被删除，并且所有其他元素都必须填充空格。您需要做的是确保<th>元素保留在那里，以填充空白区域。使用此：

th:first-child {
  visibility:hidden;
}

或

th:first-child {
  opacity:0;
}

Answer 2

使用visibility: hidden;：

th:first-child {
  visibility: hidden;
}

该元素将被隐藏，但它将在页面上分配空间。

JSFiddle

Answer 3

当您将显示设置为＆＃39; none＆＃39;时，整个元素都会消失，这也是它所采取的位置，您可以通过将不透明度设置为0来避免这种情况：

＆＃13;

th:first-child {
  opacity: 0;
}

＆＃13;

<table>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>12</td>
  </tr>
</table>

＆＃13;

隐藏列标题而不更改CSS中其他标题的位置

3 个答案: