如何使用border-collapse在thead中显示边框？

Posted 2023-03-05

【中文标题】如何使用border-collapse在thead中显示边框？

【英文标题】：How to display borders in thead with border-collapse?

【发布时间】：2020-12-18 03:05:32

【问题描述】：

我只想折叠外部边框，而不是内部边框：

table, tr 
            border: 1px solid black;
            padding: 7px;
            border-collapse: collapse;


th 
            background: #ccccff;
        

<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
            </tr>
        </thead>
 </table>

不会像Data 1 | Data 2那样显示th之间的边界，为什么？ （以及如何在th 元素之间添加这些边界）？

【问题讨论】：

您是希望整个表格有边框（包括外部），还是只是在表格外部没有边框的内部单元格？

【参考方案1】：

从table, tr 中删除border: 1px solid black。并为右侧border-right: 1px solid black 设置边框。此外，使用:last-of-type 伪类，删除最后一个元素的边框。

table, tr 
            /*border: 1px solid black;*/
            padding: 7px;
            border-collapse: collapse;


th 
            background: #ccccff;
            border-right: 1px solid black;
        
        
th:last-of-type 
            border-right: unset;
        

<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
                <th>Data 3</th>
                <th>Data 4</th>
                <th>Data 5</th>
                <th>Data 6</th>
                <th>Data 7</th>
                <th>Data 8</th>
                <th>Data 9</th>
                <th>Data 10</th>
            </tr>
        </thead>
 </table>

【参考方案2】：

border-collapse 没有你想象的效果。它只是防止每个单元格的边界之间之间的间隙。这是没有边框折叠的情况：

table 
  border: 1px solid black;
  padding: 7px;
  border-collapse: none;


th,td 
  border: 1px solid blue;

<table>
  <thead>
    <tr>
      <th>Data 1</th>
      <th>Data 2</th>
    </tr>
  </thead>
</table>

另一个问题是您将边框添加到tr - 这只是行，它不适用于行内的单元格。另外仅供参考，在 CSS 中为表格添加边框只会在整个表格的外部添加边框。

要将边框应用到单元格，您需要将边框 CSS 添加到 th 元素（以及表格其余部分的 td），例如：

th, td 
  border: 1px solid blue;

Working Snippet 仅包含带边框的行和带边框的 th/tds 示例：

table,
tr 
  border: 1px solid black;
  padding: 7px;
  border-collapse: collapse;
  text-align:center;


th 
  border: 1px solid blue;


tr.showborder td 
  border: 1px solid red;

<table>
  <thead>
    <tr>
      <th>Data 1</th>
      <th>Data 2</th>
      <th>Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>this ROW</td>
      <td> has a</td>
      <td>border</td>
    </tr>
    <tr>
      <td>this ROW</td>
      <td> also has a</td>
      <td>border</td>
    </tr>
    <tr class="showborder">
      <td>The cells in </td>
      <td>this row all</td>
      <td>have borders</td>
    </tr>
    <tr class="showborder">
      <td>The cells in </td>
      <td>this row all</td>
      <td>have borders</td>
    </tr>
  </tbody>
</table>