HTML Fixed header - Align position th at the same level as td

Question

I've created a table with fixed header and scrolling. It works really well, but the table header alignment doesn't match the table data. I mean, the result should be

--------------------
Id Heading2 Heading3
--------------------
 1  value1   value2
 2  value1   value2
 3  value1   value2

But in my table the headers doesn't match the table data which mean the headers are not aligned properly. Here is my Fiddle. I've tried padding. But it didn't work. So, please help how to align the headers to match corresponding column? JQuery and Javascript solution is also acceptable.

seed · Answer 1 · 2013-12-03T07:23:57.937

Try this one:

html:

<table>
   <thead>
        <tr>
            <th class="id">Id</th>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="id">1</td>
            <td class="name">Raja</td>
            <td class="position">developer</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
    </tbody>
</table>

css:

 thead tr th
{
    color:red;
    text-align:center;
    width:100px;
}
tbody
{
    position: absolute;
    height: 100px;
    overflow: scroll;
    background-color:red;
}
tbody tr td
{
    width:100px;
}
.id
{
    text-align:right;
}
.name, .position
{
    text-align:center;
}

You need to specify the width of the tbody td to align them with the header. In order to have a scroll, you need to make it absolute... — seed, Dec 03 '13 at 07:25

Mr.G · Answer 2 · 2013-12-03T07:01:08.443

Try this css:

 thead >tr,th
    {
       border:none;
       padding:5px 20px 5px 10px;
       text-align: center;
       background-color:#0B3B17; 
       font-size:12pt;
    }
    td
    {
      border:none;
      color:#61210B; 
      text-align: center;
      padding: 3px 5px;
    }
    table
    {
     display: block ;
     height: 100px;
     overflow-y: scroll;
     width:400px;
     background-color: #ddd;
   }

HTML Fixed header - Align position th at the same level as td

2 Answers2