0

我正在尝试创建一个 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);
});

​</p>

4

2 回答 2

0

编辑：

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

见参考

于 2012-11-25T18:40:56.947 回答
0

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

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

工作演示

于 2012-11-25T18:49:48.060 回答