更改跨度不同的列的边框间距

Question

我有一个问题，如何仅使用本机html表元素来实现如下所示的视图。

基本上我想做的就是更改那些在th范围内且等于4的tds的边界间距。

table {
  background-color: gray;
  border-spacing: 0.5em;

}

td, th {
 background-color: orange;
}

    <table>
      <thead>
        <tr>
          <th>Th1</th>
          <th colspan="4">Th2</th>
          <th>Th3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Td</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td</td>
        </tr>
      </tbody>
    </table>

Answer 1

尝试在表格内插入表格

.table1 {
  background-color: gray;
  border-spacing: 0.5em;
}

td,
th {
  background-color: orange;
}

.table2 {
  background-color: gray;
  border-spacing: 0.1em 0;
}

.holder {
  background-color: grey;
  padding:0;
}

<table class='table1'>
  <thead>
    <tr>
      <th>Th1</th>
      <th colspan="4">Th2</th>
      <th>Th3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Td</td>
      <td colspan='4' class='holder'>
        <table class='table2'>
          <tr>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
          </tr>
        </table>
      </td>
      <td>Td</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用填充来模拟此操作，并将着色仅应用于内容：

table {
  background-color: gray;
  border-spacing: 0.3em 0.2em;
}

td,
th {
  background: orange content-box;
}

th:nth-child(2) {
  padding: 0 0.5em;
}

td:nth-child(2) {
  padding-left: 0.5em;
}

td:nth-last-child(2) {
  padding-right: 0.5em;
}

<table>
  <thead>
    <tr>
      <th>Th1</th>
      <th colspan="4">Th2</th>
      <th>Th3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Td</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td</td>
    </tr>
  </tbody>
</table>