入れ子テーブル with Bootstrap

table.html

<table class="table table-bordered table-striped">
  <tr>
    <td>cell</td>
    <td class="has-table">
      <table class="table table-bordered table-striped inner-table">
        <col class="first">
        <col>
        <tr class="first">
          <td>cell-11</td>
          <td>cell-12</td>
        </tr>
        <tr>
          <td>cell-21</td>
          <td>cell-22</td>
        </tr>
        <tr>
          <td>cell-31</td>
          <td>cell-32</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>cell</td>
    <td class="has-table">
      <table class="table table-bordered table-striped inner-table">
        <col class="first">
        <col>
        <tr class="first">
          <td>cell-11</td>
          <td>cell-12</td>
        </tr>
        <tr>
          <td>cell-21</td>
          <td>cell-22</td>
        </tr>
        <tr>
          <td>cell-31</td>
          <td>cell-32</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

table.scss

.table {
  .has-table {
    padding: 0;
    
    .inner-table {
      margin-bottom: 0;
      border-width: 0;

      col {
        border-left: 1px solid rgb(221, 221, 221);
      }
      tr {
        border-top: 1px solid rgb(221, 221, 221);
      }
      .first {
        border-width: 0;
      }
      td {
        border-width: 0;
      }
    }
  }
}