Html 表格单元格（td，th）不'；t取colgroup中给定的宽度_Html_Css

Html 表格单元格（td，th）不'；t取colgroup中给定的宽度

html css

Html 表格单元格（td，th）不'；t取colgroup中给定的宽度,html,css,Html,Css,我试图使用colgroup的col元素为表单元格指定最小宽度。表格由一个div包装，该div设置了一些宽度（小于列中设置的所有单元格的组合宽度），并且div的溢出设置为自动这是我的html代码- <!DOCTYPE html> <html> <head> <style type="text/css"> .table-block { border-spacing: 0; bor

我试图使用

colgroup

的

col

元素为表单元格指定最小宽度。

表格

由一个

div

包装，该div设置了一些宽度（小于

列

中设置的所有单元格的组合宽度），并且

div

的

溢出

设置为

自动

这是我的html代码-

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

这样做对吗？为什么会这样

jsiddle

我认为这里的问题是，表最终默认为容器的100%宽度，如果没有内容强制它这样做，它的内部元素就无法超过这个宽度。当试图给

tr

或

td

一个大于表自身宽度的宽度时，也会发生同样的情况

你的方法和我的差不多。我唯一要做的改变是：

<div style" ... overflow-x:scroll; overflow-y:hidden;">

这样，滚动条就不会出现在旧版IE的下方

当然，这假设您只希望表格水平滚动

<div style" ... overflow-x:scroll; overflow-y:hidden;">