<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;
}