Question

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

但是，我似乎无法使其工作 - 当我设置容器宽度时，它充当表的上限，即使我显式设置列的宽度（使用CSS或Jquery）表拒绝显示正确的宽度。即使我设置“overflow：scroll”，滚动条也不会变为活动状态。

当列宽变小时，表格宽度也应该减小，这就是为什么我不能使用表格宽度= 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

修改

<div STYLE=" height: 100px; width: 100px; font-size: 12px; overflow: auto;"> <table bgcolor="green"> <tr><td bgcolor="blue">testing </td></tr> <tr><td>free php scripts;/td></tr> <tr><td bgcolor="blue">free php scripts</td></tr> <tr><td>free php scripts</td></tr> <tr><td bgcolor="blue">free php scripts</td></tr> </table> </div>

see reference

Answer 2

不确定我是否正确理解了您的问题。如果您正在使用表格中的滚动条，那么您可以使用display: block类上的.a来简单地执行此操作：

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

Working DEMO

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

2 个答案: