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

时间:2011-02-06 19:46:19

标签: html css html-table

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

在示例中,DATA中有tabletableborder: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或类似内容不适用于inlineChrome元素。请注意,使用width:100%时,表格布局比使用td更令人愉快(我不明白这种区别)。

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

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

  • 我认为这是一个非常基本的事情,我很困惑为什么用CSS表达这么难?
  • 目标是让它免于任何JavaScript,所以只有带黑客的CSS
  • 用户可以调整窗口大小,例如从800px调整到1920px甚至更宽,因此width的宽度将自动跟随(不使用JavaScript)
  • 它也会在Chrometable等基于文本的浏览器上显示效果
  • table
  • 发送电子邮件时,输出不会太杂乱,无法轻松解析
  • 它应在主要4(IE,FF,Chrome,Safari)
  • 上或多或少地显示
  • 它不会破坏其他人(它可能有渲染错误,但内容不得隐藏)

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

1 个答案:

答案 0 :(得分:18)

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

我在测试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。虽然表格通常是页面布局的禁忌,但表格是正确的,鼓励表格数据布局。