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

Question

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

我有这个小提琴来演示。 请注意，表格单元格在CSS中定义了900px的宽度，但表格仍会缩小它们以适应其父级的宽度。

但是我想要的效果是让表的宽度仅取决于表单元格的宽度（同时具有最小宽度来填充父级），但仍包含在父级中，并带有overflow: scroll以便表可以溢出，用户可以滚动。

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

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