当存在嵌套表时删除边框间距-解网

问：

我想实现一个可能包含子行的表。在第一张图片中，行之间的间距完全没问题。

但是，在某些情况下，我有子行，我不希望行和嵌套表之间有间隙。如果有人能帮忙，我将不胜感激。小提琴 - 演示

body{
  background:salmon
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

thead {
  height: 60px;
}

th {
  background-color: #eee;
  color: #000;
  font-weight: 700;
  text-align: left;
  padding: 10px;
}

th:first-child,
tr:first-child td:first-child,
tr:first-child th:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

th:last-child,
tr:last-child td:last-child,
tr:last-child th:last-child,
tbody tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

tbody tr {
  cursor: pointer;
}

tbody td {
  background-color: white;
  text-align: left;
  padding: 10px;
}

tbody tr td:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

<table>
<tbody>
  <tr>
    <td>Data 1, Row 1</td>
    <td>Data 2, Row 1</td>
    <td>Data 3, Row 1</td>
  </tr>
  <tr class="has-nested-table">
    <td colspan="3">
      <!-- Nested Table -->
      <table>
        <thead>
          <tr>
            <th>Header subrow 1</th>
            <th>Header subrow 2</th>
            <th>Header subrow 3</th>
          </tr>
        </thead>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Data 1, Row 2</td>
    <td>Data 2, Row 2</td>
    <td>Data 3, Row 2</td>
  </tr>
</tbody>
</table>

javascript css html-table

当存在嵌套表时删除边框间距

Remove Border spacing when there is a nested table

评论