css - table标签内的td、th如何设置固定宽度，而不是自适应？

问题描述

问 题

效果：遇到一个问题，想用table展现一个表格。因为是手机应用页面，且列数不固定。当列数太多，超出屏幕时，tbody内可以横向滑动。

意外：但发现td设置了width。但是不会起作用，而是根据屏幕宽度自动平分了宽度。比如100px,5个td。每个自动设成了20.

解决方案

table{
    min-width: 100%;
}
td{
    min-width: 100px;
}
.table-container{
    overflow:auto;
    display: block;
}

html

<div class="table-container">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            ......
        </tr>
    </table>
</div>

这篇关于css - table标签内的td、th如何设置固定宽度，而不是自适应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！