Search code examples
javascripthtmlcsshtml-table

Remove Border spacing when there is a nested table

I want to implement a table that may have subrows. In the first image, the space between the rows is totally fine.

enter image description here

However, there is a case where I have subrows, and I don't want a gap between the row and the nested table. I would greatly appreciate it if someone could help. Fiddle - Demo enter image description here

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>

Solution

  • I managed to handle this by changing the table CSS to

     border-collapse: collapse;
 border-spacing: 0 10px;

    instead of

      border-collapse: separate;
  border-spacing: 0 10px;

    and adding fake

    <tr class="spacer">
  <td><td>
</tr>