SideBySide Inline-tables fill 100% width

SideBySide Inline-tables fill 100% width

by Scott

HTML

<p>SideBySide Inline-tables fill 100% width</p>
<table class="sideBySide">
  <tr>
    <th colspan="2">Table1</th>
  </tr>
  <tr>
    <td>1</td>
    <td>T1R1</td>
  </tr>
</table>

<table class="sideBySide">
  <tr>
    <th colspan="2">Table2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>T2R1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>T2R2</td>
  </tr>
</table>

<table class="sideBySide">
  <tr>
    <th colspan="2">Table3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>T3R1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>T3R2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>T3R3</td>
  </tr>
</table>
<table class="sideBySide">
  <tr>
    <th colspan="2">Table4</th>
  </tr>
  <tr>
    <td>1</td>
    <td>T4R1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>T4R2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>T4R3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>T4R4</td>
  </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
}

.sideBySide {
	display:inline-table;
	border-collapse: collapse;
	float:left;
	width: 25%;
}
.sideBySide th {
	background-color:#b3b3b3;
}