Table 带有滚动和自动大小列

Question

我有一个像这样的 table 带有覆盖层的滚动（仅适用于 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;
}

class overlay 仅适用于 Chrome FF，我知道，没关系。 table 的问题是如果某些文本太长，它会溢出 th 或 td 宽度。

我希望看到我的 table 这样的，但是：

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

...但是滚动像以前一样工作 table

有什么建议吗？

Answer 1

您可以在此处尝试此代码：

你只需添加一个额外的 div 来包装 table，然后说 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>

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

Answer 2

这是我的解决方案：

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

您无法设置 table 的高度，除非您将其显示设置为块状。

https://jsfiddle.net/yxfsj4c6/

Table 带有滚动和自动大小列

Table with scroll and auto size columns

html

css

overlay