我正在尝试使用col的{{1}}元素为表格单元格指定最小宽度。 colgroup由table包裹，其中设置了一些宽度（小于div中设置的所有单元格的组合宽度）并设置了col的{{1}}到overflow。
这是我的HTML代码 -
div我的问题是单元格不占用auto的宽度。它试图让自己适应包装器<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
。我希望单元格采用适当的宽度，并且应该出现滚动条。我有一个解决方案，我将col宽度设置为我需要的总宽度。每次我通过JavaScript插入新列时，这都需要我更新div宽度。
我的解决方案 -
table这是正确的做法吗？为什么会发生？
jsFiddle link
答案 0 :(得分：0)
我认为这里的问题是最终表默认为容器的100％宽度，并且其内部元素无法超出此范围而不会强制它执行此操作。尝试给tr或td宽度大于表格的宽度时也会发生同样的情况。
你的修复就像我做的那样。我唯一的改变是：
<div style" ... overflow-x:scroll; overflow-y:hidden;">
这样，在旧版本的IE上，滚动条不会出现在侧面。
这当然假设您只希望表格水平滚动。