Why Does <th> Not Span 100% Width of the Row? HTML CSS - html

Question

I've created a basic HTML table yet I can't seem to get the top <th> element to span 100% width of it's parent <tr> element (and ultimately the <table> element).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
display: block;
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">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">Teacher 1</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">Teacher 2</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">Teacher 3</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">Teacher 4</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">Teacher 5</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">Teacher 6</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">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
So when you run that code snippet ^ what I want to see is 'helloWorld' centered above the 'Teachers, School, Status' row. I'm not sure why it only seems to be expanding a quarter of the table width - does it have to do with the table-layout: fixed style that I've set on the <table> element?
Link to JSFiddle

Answer 1

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">Teacher 1</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">Teacher 2</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">Teacher 3</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">Teacher 4</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">Teacher 5</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">Teacher 6</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">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>

Answer 2

You can set your ".my-card-table" and ".table-top-heading" to {display:flex}, and your ".table-top-heading-header" to {width:100%; text-align: center}.
You also had an extra (.) on your (my-table-td ) class.
Here's a working solution ;)
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
display: flex;
}
.table-top-heading {
width: 100%;
display: flex;
}
.table-top-heading-header {
width: 100%;
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 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">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">Teacher 1</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">Teacher 2</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">Teacher 3</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">Teacher 4</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">Teacher 5</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">Teacher 6</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">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>