tables not listening, need help

[Teg]

Scott Brian or anyone else who could possibly help me here... 

I'm working on an info center remodel. It looks the way I want it to in code-pen, but when I move it to the forums, it gets all messed up. 

This is how it's supposed to look, minus the body/#wrapper in codepen: Clicky
And This is how it looks on the forum: Forum

none of the td's are the right size width if there's more than one. Also, here's the code(s):

CSS

.my-info-center, .my-info-center-sm {

 background: url('https://i.imgur.com/I3gHooB.png') no-repeat;

 background-size: cover;

 box-shadow: 1px 1px 5px #000;

 font-family: 'Philosopher', sans-serif;

}

.my-info-center th {

 background: url('https://i.imgur.com/I3gHooB.png') no-repeat;

 height: 50px;

 font-size: 12pt;

 font-weight: normal;

 box-shadow: 1px 1px 5px #000;

 text-align: center;

 padding: 5px;

 color: #fff;

 text-transform: uppercase;

 width: 20%;

}

.my-info-center td {

 width: 20%;

 color: #fff;

 font-size: 18pt;

 text-align: center;

 padding: 20px 0;

}

.lp-ns {

 font-size: 11pt!important;

}

.staff-mem-mug {

 font-size: 12pt!important;

 color: #fff!important;

 text-shadow: 1px 1px 5px #000;

 width: 90%;

}

.ava-user-area, .text-user-area {

 background-color: rgba(0,0,0,.4);

 box-shadow: 1px 1px 5px #000;

 height: 75px;

 max-height: 150px;

 text-align: left!important;

 padding-left: 10px!important;

 overflow: auto;

}

.text-user-area {

 font-size: 11pt!important;

}

.my-info-center-sm th {

 font-size: 11pt!important;

 color: #fff;

 text-transform: uppercase;

 font-weight: normal;

 height: 40px;

 text-shadow: 1px 1px 1px #000;

   text-align: center;

}
HTML


$[news]

{foreach $[category]}

$[category.anchor]

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>

{/foreach}



{if $[show_stats]}

<div class="container stats">



<div class="content">

<table class="my-info-center" width="100%">

 <tr>

   <thead>

     <th>Information & Stats</th>

   </thead>

 </tr>

</table>

<table class="my-info-center" width="100%">

 <tr>

   <thead>

     <th>Topics</th>

     <th>Posts</th>

     <th>Students</th>

     <th>Last Post</th>

     <th>New Student</th>

   </thead>

 </tr>

 <tbody>

   <tr>

     <td> $[total_threads] </td>

     <td> $[total_posts] </td>

     <td> $[total_members] </td>

       {if $[last_updated_thread]}

     <td class="lp-ns"> $[last_updated_thread.link] by $[last_updated_thread.last_post.created_by] on $[last_updated_thread.last_post.created_on]</td>

       {/if}

     <td class="lp-ns">Welcome, $[newest_user]!</td>

   </tr>

 </tbody>

</table>

<hr>

<table class="my-info-center" width="100%">

 <tr>

   <thead>

     <th>Online Now</th>

     <th>Here Today</th>

   </thead>

 </tr>

 <tbody>

   <tr>

     <td class="staff-mem-mug" valign="top">$[total_staff_online] Staff | $[total_members_online] Student{if $[total_members_online] != 1}s{/if} | $[total_guests_online] Muggle{if $[total_guests_online] != 1}s{/if}</td>

     <td class="staff-mem-mug" valign="top">$[total_staff_online_24] Staff | $[total_members_online_24] Student{if $[total_members_online] != 1}s{/if} | $[total_guests_online_24] Muggle{if $[total_guests_online] != 1}s{/if}</td>

   </tr>

   <tr>

     <td class="ava-user-area" valign="top">{foreach $[online_user]}<a href="$[online_user.href]" title="$[online_user.username]">$[online_user.avatar_small]</a> &nbsp;{/foreach}</td>

     <td class="text-user-area" valign="top">{foreach $[online_user_24]}$[online_user_24]$[online_user_24.comma]{/foreach}</td>

   </tr>

 </tbody>

</table>

<table class="my-info-center-sm" width="100%">

 <tr>

   <thead>

     <th>Legend: &nbsp; &nbsp; <span style="text-transform: none;"><strong><em>Admin</em></strong> | <strong>Global Mod</strong> | <em>Mod</em> | <span style="color: #cf0000">Gryffindor</span> | <span style="color: #0ca224">Slytherin</span> | <span style="color: #bfc709;">Hufflepuff</span> | <span style="color: #0c84a2;">Ravenclaw</span></span></th>

   </thead>

 </tr>

</table>







</div>

</div>

{/if}

I have been trying to figure this out since last night, so any and all help would be greatly appreciated. I'm probably overlooking something stupid-simple. 

[Brian]

<thead> goes outside of <tr>, not the other way around. It functions the same as the <tbody> tag.

www.w3schools.com/tags/tag_thead.asp

The width problem will be remedied if you change the table layout to fixed instead of the default auto.

.my-info-center, .my-info-center-sm {
    background: url('https://i.imgur.com/I3gHooB.png') no-repeat;
    background-size: cover;
    box-shadow: 1px 1px 5px #000;
    font-family: 'Philosopher', sans-serif;
    table-layout: fixed !important;
}

[Teg]

Brian - see something stupid simple and it's fixed. Thank you so much. I really need to work on tables more in general. I'll take a look at w3schools and do some reading. Thank you, thank you, thank you!