Table with scroll and auto size columns

Question

I have a table like this with scroll with overlay (only for Chrome):

https://jsfiddle.net/pmiranda/t0pmjny6/2/

The important css is:

table.scroll {
    width: 100%;
    display: table;
}

table.scroll tbody {
    display:block;
    max-height:180px;
    overflow-y:overlay;
}

table.scroll thead, table.scroll tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

The class overlay works only for Chrome an FF, I know, that's ok. The problem with that table is if some text is too long, it overflow the th or td width.

I would like to see my table like this but:

https://jsfiddle.net/pmiranda/29z5hn06/2/

...BUT with scroll working like in the previous table

Any suggestion?

Answer 1

Here is my solution:

table.scroll {
    display: inline-block;
    table-layout:auto;
    max-height:180px;
    overflow-y:overlay;
    width: auto;
}

table.scroll thead, table.scroll tbody tr {
    width:100%;
}

th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

You can't set the height of a table unless you set its display to block.

https://jsfiddle.net/yxfsj4c6/

Answer 2

You can try this code here:

you just add an extra div for wrapping the table, and talk the div is you expected height or max-height.

.table-wrap {
    max-height: 300px;
    overflow: auto;
}
table.scroll {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

table.scroll thead,
table.scroll thead tr {
    background: #fff;
}
table.scroll thead tr th {
    position: sticky;
    top: 0;
    background: #fff;
    text-align: left;
}

<div class="table-wrap">
    <table class="scroll">
        <thead>
            <tr>
                <th>Año</th>
                <th>Mes</th>
                <th>Obra</th>
                <th>Tipooooooo oooooooooo ooooo ooooooo</th>
                <th>Cantidad</th>
                <th>Imp. Nómina</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2018</td>
                <td>Julio</td>
                <td>EDIFICIO FARELLONES</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>52</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_1" value="2018072507">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Agosto</td>
                <td>EDIFICIO SUCRE</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>33</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_2" value="2018082803">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Junio</td>
                <td>EDIFICIO TRANSOCEANICA 2</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>45</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_3" value="2018062703">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Junio</td>
                <td>HANNOVER 2 Y 3</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>61</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_4" value="2018062803">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Junio</td>
                <td>OTOÑAL</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>33</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_5" value="2018062904">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Julio</td>
                <td>MONTENOVA</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>41</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_6" value="2018070408">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Julio</td>
                <td>HOMECENTER ÑUÑOA</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>42</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_7" value="2018071906">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Julio</td>
                <td>HOMECENTER ÑUÑOA</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>1</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_8" value="2018072413">
                </td>
            </tr>
            <tr>
                <td>2018</td>
                <td>Julio</td>
                <td>EDIFICIO MATUCANA I</td>
                <td>PROGRAMA OFTALMOLOGICO</td>
                <td>62</td>
                <td>
                    <input type="checkbox" name="mensual" class="check_social_mensual" id="checkbox_social_mensual_9" value="2018072409">
                </td>
            </tr>
        </tbody>
    </table>
</div>

Note: This code works fine but position sticky not support old browser see this https://caniuse.com/#feat=css-sticky