Question

当我在div中有一个表并且表的宽度大于div时，表将自动调整其所有单元格的大小以匹配，即使单元格已明确设置宽度。

我有这个fiddle来证明。请注意，表格单元格在CSS中定义了900px宽度，但表格仍会缩小它们以适合其父级宽度。

但我想要的效果是让表格的宽度仅取决于表格单元格的宽度（平均时间内有一个最小宽度来填充父级），但仍然包含在{{1}的父级中因此表会溢出，用户可以滚动。

简而言之：容器具有固定宽度，表具有动态宽度，具体取决于表格单元格的宽度。

Answer 1

我认为这就是你所追求的目标：

table { 
    border-collapse:separate; 
    border-top: 3px solid grey;
    min-width: 100%;
}

此...

使表格成为容器的宽度
允许表格扩展到大于容器的大小
如果宽度大于容器，则滚动条的结果

尽管没有内容，但这并不强制单元格为900px，您可以通过将单元格内容包装在具有最小宽度的元素中来强制执行此操作：

<div class="container">
    <table>
        <tr>
            <td class="headcol">1</td>
            <td class="long">ZOMG</td>
            <td class="long"><div>ZOMG</div></td>
        </tr>
    </table>
</div>

CSS

table { 
    border-collapse:separate; 
    border-top: 3px solid grey;
    table-layout: fixed;
}

td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}

.container { 
    width: 600px; 
    overflow-x:scroll;  
    overflow-y:visible;
    border: 1px solid red;
    padding: 10px;
}

.long { 
    background:yellow; 
    letter-spacing:1em; 
    display: 
}

.long div {
    min-width: 900px;   
}

表格宽度取决于表格单元格而不是父级

1 个答案: