Таблица со столбцами прокрутки и авторазмера

Question

У меня есть такая таблица с прокруткой с наложением (только для Chrome):

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

Важное значение CSS:

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;
}

Класс overlay работает только для Chrome FF, я знаю, это нормально. Проблема с этой таблицей в том, что если какой-то текст слишком длинный, он выходит за пределы ширины th или td.

Я бы хотел, чтобы мой стол был таким, но:

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

... НО с прокруткой, работающей как в предыдущей таблице

Есть предложения?

Answer 1

Вот мое решение:

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;
}

Вы не можете установить высоту таблицы, если не установите ее отображение в блок.

https://jsfiddle.net/yxfsj4c6/

Answer 2

Вы можете попробовать этот код здесь:

Вы просто добавляете дополнительный div для упаковки таблицы и говорите, что div - это ожидаемая вами высота или максимальная высота.

.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>

Примечание: Этот код работает нормально, но позиция привязки не поддерживает старый браузер, см. Это https://caniuse.com/#feat=css-sticky