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

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

在示例中，表中有DATA，表格具有边框：1px纯黑色，输出也可以方便地从卷曲中进行解析(因此为空格：pre); div只是正常的CSS布局帮手，如果可能，我们也摆脱那个！

重要的部分是，它不应该是固定的像素宽度布局类型，如果数据不需要太多的空间，表格应该小于可用的宽度。所以总结起来，一个普通的桌子，不会比屏幕更宽。理想情况下，表只会拉伸父元素，直到达到包围元素的最大宽度，然后才能变宽。

在Chrome中，我认为是一个邪恶的黑客，我必须保持桌面的最大宽度可用，并在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”在这里没有错误，在我的应用程序中，有时第三列可能会显示，这在表格标题输出时是不可知的。 (有些风格的东西也是多余的)

上面的诀窍是，td的最大宽度一起比通常的屏幕(590px)小，然后表被拉伸到给定的宽度，这是100％。由于tds不会超出屏幕，内部div的溢出属性可以按预期工作。然而在FF中，它不会以这种方式工作，不论宽度还是最大宽度(这可能是由于它们的内联状态)。在Chrome中，宽度：100％或类似的效果不适用于td或tr元素。请注意，使用max-width可以获得比宽度更好的表格布局(我不明白这个区别)。

除了仅在Chrome中有效的错误之外，还有一个缺陷是，即使只有少量数据要显示，该表也将使用全屏幕宽度。

关于这一切的一些注释：

>我认为这是一个非常基本的事情，我很困惑，为什么看起来很难用CSS表达
>一个目标是保持它没有任何JavaScript，所以只有CSS与黑客
>用户可以调整窗口的大小，例如从800像素到1920像素，甚至更宽，因此表的宽度将自动跟随(无JavaScript)
>它应该在基于文本的浏览器(如Lynx和w3m)上显示出良好的效果
>输出不得过于混乱，以便从卷曲管道轻松解析
>它应该在主要的4(IE，FF，Chrome，Safari)上显示或多或少的正确
>它不能破坏别人(它可以渲染错误，但不能隐藏内容)

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

解决方法

(我的答案比可能需要的稍晚，但也许对你或别人没有什么有用…

我正在包括一些我测试HTML / CSS以实现我想要的标记(下面)。

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

我设置的固定宽度(这个例子为75px)很容易说明事情。

流体宽度有宽度：自动，因此它们填充剩余表空间的宽度;它们也重要的是具有空格：Nowrap，所以文本不会扩展单元格的高度(白空间：pre works too);最后他们有溢出：隐藏，所以文本不会溢出的宽度，使事情丑陋，或者你可以设置溢出：滚动它有一个滚动条在这些单元格当/如果必要的话。

该表设置为100％宽度，因此它将根据需要扩展以适应屏幕/等。
关于表格风格的重要事情是表格布局：固定，这使表格更贴合布局的页面，而不是根据自己的内容自动调整大小(table-layout：auto)。

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

<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。虽然表格一般是页面布局的no-no，但表格是正确的，并鼓励表格式的数据布局。

原文地址：https://www.jb51.cc/css/218187.html

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

解决方法

相关推荐