CSS：将具有长单元格内容的表格限制到页面宽度？ [英] CSS: Constrain a table with long cell contents to page width?

问题描述

采取以下CSS + HTML：

 < style& 
 div.stuff {
 overflow：hidden; 
 width：100％; 
 white-space：nowrap; 
} 
 table {width：100％; } 
 td {border：1px dotted black; } 
< / style> 
 
< table> 
< tr>< td> 
< div class ='stuff'>长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本; / div> 
< / td>< / tr> 
< / table> 
  

这会导致表增长以容纳整个长文本。

我添加了 width：100％和 overflow：hidden 以指示长文本应该被简单地截断，但似乎忽略它。如何约束表/表单元格/ div，以使表格的宽度不超过文档的宽度？

（请不要评论使用表的优点我确实显示表格数据，所以使用表语义正确。也请不要质疑用户友好的截断文本;实际上有一个expand

（编辑：我试过 max-width too，to avail。）

解决方案

要实现这一点，你必须将长文本包装到两个div。外层得到 position：relative ，并且只包含内层。内部获取 position：absolute ， overflow：hidden 和 width：100％ / code>（这限制为表格单元格的大小）。

表格布局算法现在认为这些表格单元格为空（因为绝对定位元素从布局计算中排除）。因此，我们必须告诉它增长那列。有趣的是，在相关的< col> 元素上设置 width：100％ t实际填充100％的宽度，但100％减去所有其他列（自动调整大小）的宽度。它还需要一个 vertical-align：top ，否则（空）外部div对齐中间，因此绝对定位的元素将关闭半行。 p>

下面是一个完整的例子，其中有一个三列，两行表格显示了这个工作：

  div.outer {
 position：relative; 
} 
 div.inner {
 overflow：hidden; 
 white-space：nowrap; 
 position：absolute; 
 width：100％; 
} 
 table {
 width：100％; 
 border-collapse：collapse; 
} 
 td {
 border：1px dotted black; 
 vertical-align：top; 
} 
 col.fill-the-rest {width：100％; } 
  

HTML：

 < table> 
< col>< col>< col class =fill-the-rest> 
< tr> 
< td> foo< / td> 
< td> fooofooooofooooo< / td> 
< td> 
< div class ='outer'> 
< div class ='inner'> 
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本
< / div> 
< / div> 
< / td> 
< / tr> 
< tr> 
< td> barbarbarbarbar< / td> 
< td> bar< / td> 
< td> 
< div class ='outer'> 
< div class ='inner'> 
一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本长文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本一些更长的文本
< / div> 
< / div> 
< / td> 
< / tr> 
< / table> 
  

在这个例子中，前两列将具有最小的可能大小除非你还向它们添加 white-space：nowrap ）。

jsFiddle：http://jsfiddle.net/jLX4q/

Take the following CSS+HTML:

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

This causes the table to grow to accommodate the entire long text. (Make your browser window smaller to see if you have a humongous screen resolution.)

I added width: 100% and overflow: hidden to indicate that the long text should simply be cut off, but it seems to ignore that. How do I constrain the table/the table cell/the div in such a way that the table’s width does not exceed the width of the document?

(Please don’t comment on the merits of using a table at all. I am indeed displaying tabular data, so the use of a table is semantically correct. Also please don’t question the user-friendliness of cutting off the text; there is actually an "expand" button that allows the user to view the full contents. Thanks!)

(Edit: I tried max-width too, to no avail.)

解决方案

To achieve this, you have to wrap the long text into two divs. The outer one gets position: relative and contains only the inner one. The inner one gets position: absolute, overflow: hidden, and width: 100% (this constrains it to the size of the table cell).

The table-layout algorithm now considers those table cells empty (because absolutely-positioned elements are excluded from layout calculations). Therefore we have to tell it to grow that column regardless. Interestingly, setting width: 100% on the relevant <col> element works, in the sense that it doesn’t actually fill 100% of the width, but 100% minus the width of all the other columns (which are automatically-sized). It also needs a vertical-align: top as otherwise the (empty) outer div is aligned middle, so the absolutely-positioned element will be off by half a line.

Here is a full example with a three-column, two-row table showing this at work:

CSS:

div.outer {
    position: relative;
}
div.inner {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px dotted black;
    vertical-align: top;
}
col.fill-the-rest { width: 100%; }

HTML:

<table>
    <col><col><col class="fill-the-rest">
    <tr>
        <td>foo</td>
        <td>fooofooooofooooo</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>barbarbarbarbar</td>
        <td>bar</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                </div>
            </div>
        </td>
    </tr>
</table>

In this example, the first two columns will have the minimum possible size (i.e. spaces will make them wrap a lot unless you also add white-space: nowrap to them).

jsFiddle: http://jsfiddle.net/jLX4q/

这篇关于CSS：将具有长单元格内容的表格限制到页面宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！