css - Nowrap table heading 如果有空间，但如果这会破坏布局

Question

我有一张 table 。我希望标题文本不换行，我可以使用 white-space nowrap 来做到这一点。

但是我的布局是响应式的。在宽度较小的情况下，此 nowrap 将破坏布局，使表格比其容器宽。

当有足够的空间时，如何使表格标题不换行，但不换行会使表格比其容器宽。

Answer 1

您可以为此使用简单的媒体查询:

// Mobile only
@media screen and (max-width: 599px) {
    // Wrap
}

// Everything else
@media screen and (min-width: 600px) {
    // No wrap
}