<figure>
  <figcaption>_grid-1 (<code>grid-template-columns: auto 50%;</code>)</figcaption>
  <div class="_grid-1">
    <div class="_cell-1">
      <table>
        <thead>
          <tr>
            <th></th>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
            <th scope="col">F</th>
            <th scope="col">G</th>
            <th scope="col">H</th>
            <th scope="col">I</th>
            <th scope="col">J</th>
            <th scope="col">K</th>
            <th scope="col">L</th>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
            <td>E1</td>
            <td>F1</td>
            <td>G1</td>
            <td>H1</td>
            <td>I1</td>
            <td>J1</td>
            <td>K1</td>
            <td>L1</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
            <td>E2</td>
            <td>F2</td>
            <td>G2</td>
            <td>H2</td>
            <td>I2</td>
            <td>J2</td>
            <td>K2</td>
            <td>L2</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="_cell-2"></div>
  </div>
</figure>

<figure>
  <figcaption>_grid-2 (<code>grid-template-columns: minmax( 0, 1fr ) 50%;</code>)</figcaption>
  <div class="_grid-2">
    <div class="_cell-1">
      <table>
        <thead>
          <tr>
            <th></th>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
            <th scope="col">F</th>
            <th scope="col">G</th>
            <th scope="col">H</th>
            <th scope="col">I</th>
            <th scope="col">J</th>
            <th scope="col">K</th>
            <th scope="col">L</th>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
            <td>E1</td>
            <td>F1</td>
            <td>G1</td>
            <td>H1</td>
            <td>I1</td>
            <td>J1</td>
            <td>K1</td>
            <td>L1</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
            <td>E2</td>
            <td>F2</td>
            <td>G2</td>
            <td>H2</td>
            <td>I2</td>
            <td>J2</td>
            <td>K2</td>
            <td>L2</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="_cell-2"></div>
  </div>
</figure>

figure {
 margin-right: 0;
 margin-left: 0;
}
table {
  border: solid 1px;
  border-spacing: 2em;
  width: 100%;
}
tr > * {
  padding: 0;
  text-align: inherit;
  vertical-align: inherit;
}

[class*="_grid-"] {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}
._grid-1 {
  -ms-grid-columns: auto 50%;
  grid-template-columns: auto 50%;
}
._grid-2 {
  -ms-grid-columns: minmax( 0, 1fr ) 50%;
  grid-template-columns: minmax( 0, 1fr ) 50%;
}

._cell-1 {
  background: rgba( 192, 64, 64, 0.5 );
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}
._cell-2 {
  background: rgba( 64, 128, 64, 0.5 );
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}