Two things:
1.) You need to add colspan="3" as an attribute to that thto make it span all three columns of that table.
2.) You should not use display: block for a table element, regardless if that’s td, th, tr or whatever. The display setting of the th by default is table-cell– just leave that as it is, otherwise the table won’t be a “real table” in the end (i.e. the cells loose their automatic way of aligning and adjusting themselves).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 0 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
..my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header" colspan="3">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>