如何将表宽度限制为包含元素（或屏幕）？ [英] How do I limit the table width to the containing element (or screen)?

问题描述

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

在示例中有 表中的数据，表具有 border：1px （ white-space：pre ）时，输出必须是容易解析的。 div 只是一个正常的CSS布局助手，如果可能的话，我们也可以摆脱它！

部分是，它将不是固定的像素宽度布局类型，并且表应小于数据不可用的可用宽度需要那么多的空间。所以总结起来，一个简单的表，它不会比屏幕更宽。理想情况下， table 只会拉伸父元素，直到达到该包围元素的 max-width

在 Chrome 中，我认为这是一个邪恶的黑客， code> table ，并在 td 上显示滚动条。但是这对FF不起作用，也不是那种可以被认为是正确的解决方案。

下面的例子可以在 https://hydra.geht.net/table-quirx.html 一段时间：

 < head> 
< title>服从表格的最大宽度< / 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> 
只是一些信息
< / td>< / tr>< tr>< td> KEY< / td>< td>< div> DATA（可能包含长行PRE格式化）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX< / div> 
< / td>< / tr>< / table> 
< / body> 
< / html>请注意，colspan = 3在这里没有错误，在我的应用程序中，有时第三列可能会出现错误。显示，这在输出表头时无法知道。 
 
 
 
上面的技巧是， td 的 max-width 一起比通常的屏幕（ 590px ）和表然后被拉伸到给定的 width ，这是100％。由于 td 不会超出屏幕，内部 div 的 overflow 属性可以按预期工作。但是在FF中它不以这种方式工作，既不用 width 也不用 max-width   inline  -status）。在 Chrome 中， td  width：100％ c $ c>或 tr 元素。注意，使用 max-width 可以得到比 width 更好的表布局（我不明白这一区别） 
 
 
 
除了在 Chrome 中工作的错误，另一个错误是， 
 $ <>  
关于这一切的一些注释：
 
 
 
 
 
我认为这里是一个非常基本的东西，我很困惑为什么它似乎很难表达with CSS 
 
 
一个目标是保持它没有任何JavaScript，所以只有CSS与黑客
 
 
用户可以调整窗口大小，例如或者更宽，因此表的宽度将自动跟随（不使用JavaScript）
 
 
  Lynx 和 w3m 的文本浏览器
 
 
输出不应当从 curl  
 
 
管道输入时容易解析。 ，Safari）
 
 
它不会在其他人上破坏（它可以渲染错误，但不能隐藏内容）
 
 
 
 
 
我真的不知道如何归档。也许这是一个常见问题，但我自己找不到一个解决方案。
解决方案
  
 
 
 
我包含了一些标记（下面的例子） ）我测试了HTML / CSS来实现我想要的。
 
 
 
有一个固定宽度的单元格样式fixedcell和流体宽度单元格样式。
 
 
 
固定宽度设置为固定宽度（本例中为75像素），简单说明更好的效果。
 
 
 
流体宽度有 width：auto ，因此它们填充剩余表空间的宽度;它们也很重要的有 white-space：nowrap  （ white-space：pre 也会工作）;最后，它们具有 overflow：hidden ，因此文本不会溢出宽度，使事情变得丑陋，或者您可以设置 overflow：scroll ，以便在必要时在这些单元格中有滚动条。
 
 
 
设置为100％宽度，因此它将根据需要扩展以适合屏幕/ etc。 
关于表格样式的重要事情是 table-layout：fixed ，这使得表格更符合页面的布局，而不是基于自己的自动调整大小
 
 
 
我还添加了一些边框来帮助说明表格和单元格的边界。
 < html> 
< head> 
< title>具有自动宽度调整和溢出隐藏的表格。< / 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> 
< tr> 
< td class =fixedcell>第1行< / td> 
< td class =fluidcell>一大堆内容可以在这里，它仍然需要适合漂亮的单元格，而不会弄脏的东西< / td> 
< td class =fixedcell> fixie< / td> 
< td class =fixedcell>另一个< / td> 
< / tr> 
< / table> 
 
具有两个流体柱的表：
< table> 
< tr> 
< td class =fixedcell>第1行< / td> 
< td class =fluidcell>一大堆内容可以在这里，它仍然需要适合漂亮的单元格，而不会弄脏的东西< / 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< / td> 
< td class =fixedcell> fixie< / td> 
< td class =fixedcell>另一个< / td> 
< / tr> 
< / table> 
< / body> 
  
 
 
 
 
浏览器，似乎在每个都正常工作。
 
 
 
 PS。尽管表格通常不适用于页面布局，但表格是正确的，并鼓励使用表格数据布局。
 
I need to show tabular data using a table, but it will be within a fluid layout; I want to have a it fill the entire available width but not to expand horizontally beyond maximum screen-width, such that the body does not get a horizontal scrollbar.  Instead the too wide td elements shall get the scrollbar.

In the example there is DATA in the table, the table has border:1px solid black and the output shall be for easy parsing when piped from curl as well (hence the white-space:pre);  The div is just the normal CSS layout helper, if possible let's get rid of that, too!

The important part is, that it shall be no fixed pixel width layout type, and the table shall be smaller than the available width in case the data does not need that much room.  So to sum it up, a plain table which just does not get wider than the screen.  Ideally the table would only stretch the parental element until the max-width of that enclosing element is reached and then do not get wider.

In Chrome, with something I consider to be an evil hack, I got to keep the table at the maximum width available and to display the scrollbars on the td if needed.  However this does not work for FF, nor is that solution something which can be considered a correct one.

Following example of that can be found at https://hydra.geht.net/table-quirx.html for a while:
<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>
Note that the "colspan=3" is no error here, in my app sometimes a third column may show up, this cannot be known at the time the table header is output.  (Some style things are redundant, too.)

The trick above is, that the td's max-width together are smaller than the usual screen (590px) and the table then is stretched to the given width, which is 100%.  As the tds do not stretch beyond the screen, the inner div's overflow property can work as expected.  However in FF it does not work this way, neither with width nor with max-width (which is probably due to their inline-status).  In Chrome a width:100% or similar does not work on the td nor the tr elements.  Note that with max-width one gets a more pleasant table layout than with width (I do not understand that difference).

Besides the bug that this only works in Chrome, another bug is, that the table uses the full screen-width even if that is not needed if there is only small data to display.

Some notes about that all:


I think this here is a very basic thing and I am puzzled why it seems so hard to express with CSS
A goal is to keep it free of any JavaScript, so only CSS with hacks
The user can resize the window, for example from 800px to 1920px or even wider, and so the table's width shall automatically follow (without JavaScript)
It shall display good on text based browsers like Lynx and w3m, too
Output shall not be too cluttered for easy parsing when piped from curl
It shall display more or less properly on the major 4 (IE, FF, Chrome, Safari)
It shall not break on others (it can have render bugs, but content must not be hidden)


I really have no idea how to archive that.  Perhaps it's a FAQ, but I was unable to spot a solution myself.
解决方案
(My answer comes a little later than perhaps desired, but maybe it will be useful to you or someone else none-the-less...

I'm including some markup (below) that I made to test the HTML/CSS to achieve what I believe you want.

There is a fixed width cell style "fixedcell" and fluid width cell style "fluidcell".

The fixed width I've set at a fixed width (75px for this example) simple to illustrate things better.

The fluid width ones have width:auto so they fill the width of the remaining table space; they also importantly have white-space:nowrap so the text doesn't expand the cell height-wise (white-space:pre works too); and finally they have overflow:hidden so the text doesn't overflow the width and make things ugly, alternatively you could set overflow:scroll for it to have a scrollbar in those cells when/if necessary.

The table is set to be 100% width so it will expand to fit the screen/etc as needed.
And the important thing regarding the table's style is the table-layout:fixed, this makes the table adhere to the layout of the page more correctly rather than auto-sizing itself based on its own content (table-layout:auto).

I also added some borders to help illustrate the boundaries of the table and cells.
<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>


I tested it in several modern browsers and seemed to work correctly in each.

PS. Although tables are a no-no for page layout in general, tables are correct and encouraged for tabular data layout.

                        
这篇关于如何将表宽度限制为包含元素（或屏幕）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！