Align table header text with table body text? - html

Question

I just can't figure how to align the text in the header on the left together with the text in body header. The table is a scrollable table.
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 20px;
width: 100px;
}
td{
padding: 15px;
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<?php echo $stafftable?>
</tbody>
</table>
</div>
</section>
As you can see the table header text alignment is different from table body alignment. I can't seem to find what is the problem. I have tried editing the padding and the width of th and tr.

Answer 1

It is beacause you have set the different padding of th and td.
try this:
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 15px;
width: 100px;
}
td{
padding: 15px;
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th align="left">Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
</tbody>
</table>
</div>
</section>

Answer 2

Adjust your td padding property to match this of the th. In your example, td had padding 15px and th had 20px. It's responsible for the left indentation, so adjust it to be the same. In my example below it is set to 20px. Consider doing it in one place, like
td, th { padding: 20px; }
Working example:
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 20px;
width: 100px;
}
td{
padding: 20px; /* CHANGED FROM 15PX TO 20PX */
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
</tbody>
</table>
</div>
</section>