如何在广告中显示带有边框折叠的边框？

问题描述

我只想折叠外侧边框，而不折叠thead内侧：

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>

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

解决方法

从border: 1px solid black中删除table,tr。并设置右侧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>

,

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;
}

工作片段，其中包括带有边框的行和th / td带有边框的示例：

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>