2 行的样式 header

Question

我有一个 html table 有两行 header。我将第二行用于过滤器下拉列表。所以它在 table 本身是空的。

    <table class="tg wrap stripe" id="tableData">
        <thead>
            <tr>
                <th class="header-left">Name</th>
                <th class="header-left">Position</th>
                <th class="header-left">Office</th>
                <th class="header-center">Age</th>
                <th class="header-center">Start date</th>
                <th class="header-right">Salary</th>
            </tr>
            <tr>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-center"></th>
                <th class="header-center"></th>
                <th class="header-right"></th>
            </tr>
        </thead>
        <tbody>
            <tr> ... </tr>
            ...

现在我只想显示 header 的内部垂直边框和底部边框。因此我使用这个：

    .tg tr  td:first-child, th:first-child{
            border-left: none;
        }
    .tg tr  td:last-child, th:last-child{
            border-right: none;
        }
    .tg tr td, th {
            border-right: none;
            border-top: none;
            border-bottom: none;
        }

边框宽度设置为 1px 并且还设置了 border-collapse:collapse。但不知何故，我可以在 header 下方画一条底线（仅在第二条 header 线下方）。我已经试过了：

    .tg tr thead:last-child{
            border-bottom: 1px;
            }

和

    .tg tr th:last-child{
            border-bottom: 1px;
            }

没有成功。

.tg tr td:first-child, th:first-child{
  border-left: none;
}
.tg tr td:last-child, th:last-child{
  border-right: none;
}
.tg tr td, th {
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.tg tr thead:last-child{
  border-bottom: 1px;
}
.tg tr th:last-child{
  border-bottom: 1px;
}

<table class="tg wrap stripe" id="tableData">
  <thead>
    <tr>
      <th class="header-left">Name</th>
      <th class="header-left">Position</th>
      <th class="header-left">Office</th>
      <th class="header-center">Age</th>
      <th class="header-center">Start date</th>
      <th class="header-right">Salary</th>
    </tr>
    <tr>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-center"></th>
      <th class="header-center"></th>
      <th class="header-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr> ... </tr>
  </tbody>
</table>

谁能帮帮我？

此致

Answer 1

这里你有几个不足：

您必须向 th 添加边框而不是 tr
您必须添加所需的线条类型和颜色

您在此处尝试了错误的 css 路径：

.tg tr thead:last-child{
   border-bottom: 1px;
}

由于 tr 位于 thead 之前，不会发生任何事情，solid 或 color 这是您第二次尝试的问题。

所以你会得到类似的东西：

.tg thead tr:last-child th{
  border-bottom: 1px solid black;
}

之后如果你想删除边框之间的 space 只需设置：

table{
  border-collapse: collapse;
}

演示

.tg tr td:first-child, th:first-child{
  border-left: none;
}
.tg tr td:last-child, th:last-child{
  border-right: none;
}
.tg tr td, th {
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.tg thead tr:last-child th{
  border-bottom: 1px solid black;
}

<table class="tg wrap stripe" id="tableData">
  <thead>
    <tr>
      <th class="header-left">Name</th>
      <th class="header-left">Position</th>
      <th class="header-left">Office</th>
      <th class="header-center">Age</th>
      <th class="header-center">Start date</th>
      <th class="header-right">Salary</th>
    </tr>
    <tr>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-center"></th>
      <th class="header-center"></th>
      <th class="header-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr> ... </tr>
  </tbody>
</table>

2 行的样式 header

Style for 2 line header

css

html-table

tableheader

演示