表格单元格断词不会缩小

Question

我经常使用这种 HTML/CSS 结构来创建一个适合移动设备的表格（它改变了窄（移动）屏幕上的布局；CSS 框架中非常缺乏的东西），它对我来说非常可靠。在我的主要项目中，我有几个表格，其中包含大量数据和不同的宽度。

如果您打开此代码笔并将视图更改为“调试”，您可以缩小页面宽度。超过 500 像素，表格布局将发生变化。 thead 被隐藏，二级标签显示，tds 设置为 display: flex。 （我喜欢在检查器中使用响应式设备工具栏）。

表格下方是一组更简单的 div，其行为方式与我希望 TD 内的 div 工作的方式相同，但由于某种原因，td 内的第二个 div 在某个点停止收缩。我尝试了自动换行和空格的不同组合，但到目前为止还没有运气。似乎差异与这些 div 在表格内有关......

这只是表的限制，还是有办法像第二个示例一样缩小正确的 div？

谢谢！

https://codepen.io/sinrise/pen/qoypYJ

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>number</th>
            <th>content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="td-label">number</div>
                <div>this is the first one</div>
            </td>
            <td>
                <div class="td-label">number</div>
                <div>this is the second one</div>
            </td>
        </tr>
    </tbody>
</table>
<div class="cont">
    <div class="in1">oneoneone oneone one oneoneoneoneoneon</div>
    <div class="in2">two two twotwotwo twotwotwotwo</div>
</div>

table { width: 100%; table-layout: fixed; margin: 0 0 10px; }
th { padding: 10px 10px 0; text-align: left; }
td { padding: 10px;  border: 1px solid #ccc; }
.td-label {
    display: none;
    min-width: 100px;
    max-width: 100px;
    font-weight: bold;
}

@media(max-width: 500px) {
    thead { display: none; }
    td {
        display: flex;
        margin: 0 0 10px;
        > div:not(.td-label) {
            word-wrap: break-word;
            min-width: 1px;
        }
    }
    .td-label {
        display: table;
    }
}

.cont {
    display: flex;
    border: 1px solid black;
    > div {
        &:first-of-type {
            min-width: 100px;
            max-width: 50px;
        }
        min-width: 1px;
        border: 1px solid #aaa;
        word-wrap: break-word;
    }
}

Answer 1

诀窍是将表格宽度设置为 100%，将最小宽度添加到第二个 div，并在第二个 div 上设置 display: table。我更新了上面的笔和代码以反映。