html - 在html表格中设置列宽不显示滚动条

Question

我正在尝试创建一个 HTML 表格，其中的列宽会动态更改，如果表格宽度变得大于容器，则会出现一个水平滚动条。

但是，我似乎无法让它工作 - 当我设置容器宽度时，它充当表格的上限，即使我明确设置列的宽度(使用 CSS 或 Jquery)表格拒绝显示正确的宽度。即使我设置了“溢出:滚动”，滚动条也永远不会激活。

当列宽变小时，表格宽度也应该减小，这就是为什么我不能使用表格宽度 = 100%。

注意:我知道如果我在每次列宽变化时明确设置表格宽度(例如表格宽度=500px)，这个问题就可以绕过。我希望有一个更优雅的解决方案......

代码如下:

JFiddle:http://jsfiddle.net/sangil/NdY22/

HTML

<div class="container">
<table>
    <thead>
        <tr>
            <th class="a">th 1</th>
            <th>th 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>
</div>

CSS

table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
}

table td {
    border: 1px solid black;
}

table th {
    border: 1px solid black;
    background-color: lightsteelblue;
}


.container{
    border: 1px solid lightsteelblue;
    width: 300px; 
    overflow: auto;                
}

JS

$(function() {
   $('.a').width(500);
});

Answer 1

不确定我是否正确理解了您的问题。如果您在表格中使用滚动条，那么您可以通过在 .a 类上使用 display: block 来简单地做到这一点:

.a {
    width: 400px;
    display:block;
}

Working DEMO