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

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"><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>

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 th to 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 (ie 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>

Answer 2

now the helloworld in in center, used colspan=3

 <style>.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; } </style> <table class="my-card-table"> <tr > <th 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>

Answer 3

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"><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>