Cannot set width fixed table header

Question

I want to have a fixed table header. If the table is scrolled the table header stays on top. Unfortunately it loses its width information. how can i improve the table?

js fiddle

HTML

<div class="wrap">
<table>
    <tbody>
        <tr>
            <td>From</td>
            <td>Subject</td>
            <td>Date</td>
        </tr>
        <tr>
            <td>Peter Pan</td>
            <td>Apple</td>
            <td>30.06.2014</td>
        </tr>
        <tr>
            <td>Lisa Lama</td>
            <td>Banana</td>
            <td>10.03.2013</td>
        </tr>
        <tr>
            <td>Steven</td>
            <td>Tuba</td>
            <td>12.01.2013</td>
        </tr>
    </tbody>
</table>

CSS

.wrap{
    border: 4px solid lightgrey;
    height: 100px;
    width: 470px;
    overflow: auto;
}

table{
    width: 400px;
}

table tr:first-child{
    background: lightgrey;
    border: 1px solid;
    position: fixed;

}

td{   
    padding: 20px;
}

Possible duplicate of [Table with fixed header and column on pure css](http://stackoverflow.com/questions/15811653/table-with-fixed-header-and-column-on-pure-css) — Liam, Jul 04 '14 at 10:43

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

You can put the header elements of your table in a <thead> tag and the scrollable part in <tbody>. Then set the height of <tbody> and give it overflow-y: scroll

More info in this question: Is there a direct purpose for HTML's tbody?

edited May 23 '17 at 12:20

Community

1
1

answered Jul 04 '14 at 10:46

Michiel

4,160
3
30
42

Cannot set width fixed table header

HTML

CSS

1 Answers1