tbody overflow hidden not working

Question

I am trying to make tbody overflow hidden for y and auto for x but no success, i tried few techniques here,

http://jsfiddle.net/wxdgf4pr/2

http://jsfiddle.net/wxdgf4pr

http://jsfiddle.net/wxdgf4pr/1

but none worked, I want to make tbody scroll this way thead will stay where it is.

HTML

<div id="fruitcratebody" style="height: 300px; width: 500px; background:red;">
    <div id="fruitcrateContainer">
        <table id="fruitcrateTable" class="tablesorter" style="display: table;">
            <thead>
                <tr>
                    <th class="header">Column1</th>
                    <th class="header">Column2</th>
                    <th class="header">Column3</th>
                    <th class="header">Column4</th>
                    <th class="header">Column5</th>
                    <th class="header">Column6</th>
                    <th class="header">Column7</th>
                </tr>
            </thead>
            <tbody id="fruitcrateTBody">
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

tbody{
    position:relative;
    overflow:hidden;
    height:300px;
}

I want something like this, but now I am having trouble lining up column widths,

Answer 1

There is no easy way to do this because tables are formatted so as to display all the content, which means that table-cell widths and heights are adjusted to show the content, which also means that the table height and width will adjust accordingly. Any specified width and height tend to be treated as minimum values.

To get the effect that you want, you need to use two tables as shown below.

You place the headers in one table and the data in the second. Both tables have the same width and you need to make sure all the table-cells have the same width and use table-display: fixed.

Around the second table (for data), wrap a block level div with the scrolling enabled.

Note: There is at least one jQuery plug-in that deals with sticky table headers, see for example, http://www.fixedheadertable.com

Also, table-sort will not work in this two-table layout without some extra programming.

There is a jQuery plugin that seems to have both sorting and sticky headers:

http://mottie.github.io/tablesorter/docs/index.html

but you would need to try it out.

.fruitcrateTable {
    border: 1px dotted blue;
    width: 520px;
}
.fruitcrateTable table {
    width: 500px;
    table-layout: fixed;
}
.fruitcrateTable table th, .fruitcrateTable table td {
    width: 15%;
    border: 1px dotted gray;
}
.fruitcrateTable .table-body-scroll {
    height: 300px;
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

<div class="fruitcrateTable">
<table class="header-table">
    <thead>
        <tr>
            <th class="header">Column1</th>
            <th class="header">Column2</th>
            <th class="header">Column3</th>
            <th class="header">Column4</th>
            <th class="header">Column5</th>
            <th class="header">Column6</th>
            <th class="header">Column7</th>
        </tr>
    </thead>
</table>
<div class="table-body-scroll">
        <table>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 2

you can put overflow property on its parent

#fruitcrateContainer {
    height: 100px;
    overflow-y: scroll;
    background:red;
}

try this: http://jsfiddle.net/wxdgf4pr/12/