sam yatsula sam yatsula - 1 month ago 9
CSS Question

Getting tables side by side with H4 tag on top of each table

I cannot get this to work for the life of me. I want to have both tables side by side on the same line and have the h4 tag over top of the right table it is suppose to be with. I can get the tables side by side without the h4 tags but i want the h4 tags. Also for these tables to be one on the left and one on the right. Sorry if this is a lot.

This is what I have so far.



.table1,
#tableTitle1 {
float: left;
display: inline-block;
}
.table2,
#tableTitle2 {
float: right;
display: inline-block;
}
.table1,
.table2 {
height: 230px;
display: inline-block;
text-align: center;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}

<!--First Table-->
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
<!--Second Table-->
<h4 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>




Answer

Why not simply add the title as table caption, here with an extra wrapper to keep them side-by-side, top aligned.

.tablewrap {
  white-space: nowrap;
}
#tableTitle1,
#tableTitle2 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
}
.table1,
.table2 {
  height: 230px;
  display: inline-table;
  text-align: center;
  white-space: normal;
  vertical-align: top;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
  border-spacing: 3px;
}
<div class="tablewrap">
  <!--First Table-->
  <table class="table1">
    <caption id="tableTitle1">
      Graduates Status 2015
    </caption>
    <tr>
      <th>Graduates</th>
      <th>Status</th>
    </tr>
    <tr>
      <td>5218</td>
      <td>Available for Employment</td>
    </tr>
    <tr>
      <td>936</td>
      <td>Future Education</td>
    </tr>
    <tr>
      <td>158</td>
      <td>Not Seeking Employment</td>
    </tr>
    <tr>
      <td>1866</td>
      <td>Unable to Contact</td>
    </tr>
  </table>
  <!--Second Table-->
  <table class="table2">
    <caption id="tableTitle1">Graduates Employment Rates</caption>
    <tr>
      <th>Graduates</th>
      <th>Employment Rates (100%)</th>
    </tr>
    <tr>
      <td>Employment Related (Full-time)</td>
      <td>46.1%</td>
    </tr>
    <tr>
      <td>Employment Related (Part-time)</td>
      <td>8.3%</td>
    </tr>
    <tr>
      <td>Employment Unrelated (Full-time)</td>
      <td>19.8%</td>
    </tr>
    <tr>
      <td>Employment Unrelated (Part-time)</td>
      <td>16.2</td>
    </tr>
    <tr>
      <td>Not Employment</td>
      <td>19%</td>
    </tr>
  </table>
</div>

Comments