Question

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

如果打开此codepen并将视图更改为“debug”，则可以缩小页面宽度。过去500px的表格布局会发生变化。隐藏了thead，显示了二级标签，并且tds设置为display：flex。（我喜欢在检查器中使用响应设备工具栏。）

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

这仅仅是表格的限制，还是有一种方法可以像第二个例子那样使正确的div缩小？

谢谢！

<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。我更新了上面的笔和代码以反映。

表格单元格中断字词不会缩小

1 个答案: