如何在不使每列的大小相同的情况下在流体宽度表中使用椭圆？ [英] How can I use ellipses in a fluid width table without making each column the same size?

问题描述

假设我的表中的列是 id ， name ， description code>和手机。 description 列为1-255个字符，但ID最多只能包含3个字符。

我想列的大小要适当，而不是每列的大小相同。我希望 description 列在窗口太小而不能完全适合内容时溢出到省略号。





table-layout：fixed; 是使文本溢出的标准方式：省略号; 工作，但它会将所有列的大小调整为相同的大小。我宁愿保持宽度 auto 而不是固定的。

你能帮忙吗？

以下是我的 jsFiddle ： http://jsfiddle.net/RQhkk/1/

以下是截图我正在处理的内容：

请注意表1 是如何使所有栏的大小相同的？这太可怕了。

请注意，表2 是根据内容来设定列的大小？那很好。除非内容太长：表3 。然后它不适合。在这种情况下，我希望它溢出到省略号。

这里是我的html表和css代码：

 < div id =t1> 
< table> 
< thead> 
< tr> 
< th> id< / th> 
< th>名称< / th> 
< th class =ellipsis>说明< / th> 
< th>电话< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 1< / td> 
< td> alpha< / td> 
< td class =ellipsis> Lorem ipsum dolor sit amet，consectetur adipiscing elit。< / td> 
< td> 555-555-5555< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> beta< / td> 
< td class =ellipsis> Sed et nulla neque。< / td> 
< td> 555-555-5555< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> gamma< / td> 
< td class =ellipsis> Morbi imperdiet neque ut lorem rhoncus fermentum。< / td> 
< td> 555-555-5555< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
 
< style> 
＃t1 table {
 table-layout：fixed; 
宽度：100％; 
} 
＃t1 td {
 white-space：nowrap; 
} 
＃t1 td.ellipsis {
 overflow：hidden; 
 white-space：nowrap; 
文本溢出：省略号; 
 word-break：全部破解; 
 word-wrap：分词; 
} 
< / style> 
  

如果我删除 table-layout：fixed; 列宽是你所期望的 - 根据内容大小而定。不幸的是，我不能在没有固定布局的情况下使省略号工作。如果你指定了一个 max-width c $ c> for td.ellipsis 。

Let's say my columns in a table are id, name, description, and phone. The description column is 1-255 characters, but the id is only max 3 characters.

I'd like the columns to be appropriately sized rather than each column being the same size. And I'd like the description column to overflow to an ellipsis when the window is too small to fit the contents in its entirety.

table-layout:fixed; is the standard way to make text-overflow: ellipsis; work, but it resizes all the columns to the same size. I'd prefer to keep the widths auto rather than fixed.

Can you help?

Here's my jsFiddle: http://jsfiddle.net/RQhkk/1/

Here's a screenshot of what I'm dealing with:

Notice how Table 1 makes all columns the same size? That's awful.

Notice how Table 2 sizes the columns based on content? That's good. Except when the content is too long: Table 3. Then it doesn't fit. In that case I'd like it to overflow to an ellipsis.

And here's my html table and css code:

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th class="ellipsis">description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="ellipsis">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

<style>
#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

If I remove the table-layout: fixed; the column widths are what you'd expect - sized to the content. Unfortunately I just can't get the ellipsis to work without the fixed layout. Where am I going wrong?

解决方案

It should work if you specify a max-width for td.ellipsis.

这篇关于如何在不使每列的大小相同的情况下在流体宽度表中使用椭圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！