Scrollable tbody doesn't occupy all available width

Question

I have a table that contains a lot of rows (1000+). Structure is really simple, here is a simplified example with only one row.

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
    </tbody>
</table>

I need column names to be fixed, so I made tbody scrollable. I added these CSS rules

tbody {
    display: block;
    overflow-y: scroll;
    overflow-x: none;
    max-height: 150px;
}

Here is a full JSfiddle example

There are 2 problems.

1. <tbody> doesn't occupy all the width. I tried with width: 100%; but it doesn't work. display: block; seems to prevent normal width behaviour but I need it for the scroll. How can I do it occupy all the available space? It's fine even if only 1 column get all the remaining space

2. <thead> and <tbody> column width is different. At the moment I use a jQuery piece of code to set headers width like other rows, this is fine but I wonder if a better solution is possible.

Answer 1

add this to css

thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* even columns width , fix width of table too*/

}