Question

我需要使用table显示表格数据，但它将在流畅的布局中;我想让它填充整个可用宽度，但不要水平扩展超过最大屏幕宽度，这样body不会得到水平滚动条。相反，过宽的td元素将获得滚动条。

在示例中，DATA中有table，table有border:1px solid black，输出应该是为了在卷曲时也能轻松解析（因此white-space:pre）; div只是普通的CSS布局助手，如果可能的话，我们也可以摆脱它！

重要的是，它应该没有固定的像素宽度布局类型，table应小于可用宽度，以防数据不需要那么多空间。总而言之，一张普通的桌子不会比屏幕宽。理想情况下，table只会延伸父元素，直到达到该封闭元素的max-width，然后不会变宽。

在Chrome中，我认为这是一个邪恶的黑客攻击，我必须将table保持在可用的最大宽度，并在需要时在td上显示滚动条。然而，这对FF不起作用，也不是那些可以被认为是正确的解决方案。

以下示例可以在https://hydra.geht.net/table-quirx.html找到一段时间：

<head>
<title>Obey max-width for table</title>
<style>
.nw             { white-space:nowrap }
.quirx div      { width:100%; max-width:100%; white-space:pre }
.quirx td       { max-width:90px; border:1px solid black }
.quirx td+td    { max-width:500px; overflow:auto }
table.quirx     { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td              { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>

请注意，“colspan = 3”在这里没有错误，在我的应用中有时可能会出现第三列，这在输出table标题时无法知道。（有些风格的东西也是多余的。）

上面的诀窍是，td的{{1}}一起小于通常的屏幕（max-width），然后590px被拉伸到给定的{ {1}}，这是100％。由于table不会延伸到屏幕之外，因此内部width的{{1}}属性可以按预期工作。但是在FF中，这种方式不起作用，既不是td也不是div（这可能是由于overflow - 状态）。在width中，max-width或类似内容不适用于inline和Chrome元素。请注意，使用width:100%时，表格布局比使用td更令人愉快（我不明白这种区别）。

除了仅在tr中有效的错误之外，另一个错误是max-width使用全屏宽度，即使只有小数据< / strong>显示。

关于这一切的一些注意事项：

我认为这是一个非常基本的事情，我很困惑为什么用CSS表达这么难？

目标是让它免于任何JavaScript，所以只有带黑客的CSS

用户可以调整窗口大小，例如从800px调整到1920px甚至更宽，因此width的宽度将自动跟随（不使用JavaScript）

它也会在Chrome和table等基于文本的浏览器上显示效果

从table
发送电子邮件时，输出不会太杂乱，无法轻松解析
它应在主要4（IE，FF，Chrome，Safari）
上或多或少地显示
它不会破坏其他人（它可能有渲染错误，但内容不得隐藏）

我真的不知道如何存档。也许这是一个FAQ，但我自己无法找到解决方案。

Answer 1

（我的答案比预期的要晚一点，但也许对你或其他人来说非常有用......

我在测试HTML / CSS时使用了一些标记（下面）来实现我认为你想要的。

有一个固定宽度的单元格样式“fixedcell”和流体宽度单元格样式“fluidcell”。

我将固定宽度设置为固定宽度（本例中为75px），这样可以更好地说明事情。

流体宽度为 width：auto ，因此它们填充剩余表空间的宽度;它们也非常重要地具有 white-space：nowrap ，因此文本不会在高度上扩展单元格（ white-space：pre 也可以）;最后他们有溢出：隐藏所以文字不会溢出宽度并使事情变得丑陋，或者你可以设置溢出：滚动让它在那些中有一个滚动条在必要的时候。

表格设置为100％宽度，因此它会根据需要扩展以适应屏幕/等。关于表格样式的重要事项是 table-layout：fixed ，这使得表格更加正确地遵循页面布局，而不是根据自己的内容自动调整页面大小（表格 - 布局：自动）

我还添加了一些边框来帮助说明表格和单元格的边界。

<html>
<head>
    <title>Table with auto-width sizing and overflow hiding.</title>
    <style type="text/css">
        table {width:100%; border:solid 1px red; table-layout:fixed;}
        table td {border:solid 1px green;}
        .fixedcell {width:75px;}
        .fluidcell {width:auto; overflow:hidden; white-space:nowrap;}
    </style>
</head>
<body>
    Table with one fluid column:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>

    Table with two fluid columns:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>
</body>

我在几个现代浏览器中对它进行了测试，并且似乎在每个浏览器中都能正常工作。

PS。虽然表格通常是页面布局的禁忌，但表格是正确的，鼓励表格数据布局。

如何将表格宽度限制为包含元素（或屏幕）？

1 个答案: