在html表格中设置列宽不需要'；显示滚动条

我试图创建一个HTML表格，其中列宽是动态更改的，如果表格宽度大于容器，就会出现一个水平滚动条

然而，我似乎无法做到这一点——当我设置容器宽度时，它充当表的上限，即使我显式地设置了列的宽度（使用CSS或Jquery），表仍拒绝显示正确的宽度。即使我设置了“溢出：滚动”，滚动条也不会激活

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

注意：我知道如果每次列宽更改时都显式设置表宽（例如，表宽=500px），则可以忽略此问题。我希望有一个更优雅的解决方案

代码如下：

JFiddle：

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>

JS

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

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

​

编辑：

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

测试
免费php脚本/td>
免费php脚本
免费php脚本
免费php脚本

---

我不确定我是否正确理解了你的问题。如果您正在查找表中的滚动条，则可以使用

上的
显示：block
。a

类：

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

---

这不是我要问的……我不是想把滚动条放在单个单元格内，而是放在整个桌子上。哦，实际上我太匆忙了，被误解了。现在，请看我编辑的答案。这是一个有趣的答案，但将单元格元素更改为块会弄乱表格显示-看到了吗。将类应用于th会把事情搞砸，我将元素包装在span中。