如何在流体宽度表中使用椭圆而不使每列的大小相同？

Question

假设我在表格中的列是id、name、description 和phone。 description 列是 1-255 个字符，但 id 最多只有 3 个字符。

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

table-layout:fixed; 是使text-overflow: ellipsis; 工作的标准方法，但它将所有列的大小调整为相同的大小。我宁愿保持宽度 auto 而不是固定的。

你能帮忙吗？

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

这是我正在处理的屏幕截图：

注意Table 1 如何使所有列的大小相同？太可怕了。

注意Table 2 如何根据内容调整列的大小？那挺好的。除非内容太长：Table 3。然后就不合适了。在这种情况下，我希望它溢出到省略号。

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

<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>

如果我删除了table-layout: fixed;，列宽就是您所期望的——根据内容调整大小。不幸的是，如果没有固定的布局，我就无法让省略号工作。我哪里错了？

Answer 1

如果您为td.ellipsis 指定max-width，它应该可以工作。

Answer 2

我的解决方案是使用 jquery 获取列中文本的最大宽度并将它们分配给内容宽度，省略号列除外，它将是最大大小。

我的 jsfiddle 示例可以在这里找到 http://jsfiddle.net/qt7eQ/1/

<script type="text/javascript">
$(function() {
    //add a innerParagraph block element to all columns except for the one that has the class ellipsis
    $( "#t3 tr td:not(.ellipsis)" ).wrapInner(function() {
          return "<p class='innerParagraph'></p>";
    });

    //get the first column and assign it the width of the elements in the first column
    $( "#t3 tr th:nth-child(1)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(1) p" ) );
    $( "#t3 tr td:nth-child(1)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(1) p" ) );

    //get the second column and assign it the width of the elements in the second column
    $( "#t3 tr th:nth-child(2)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(2) p" ) );
    $( "#t3 tr td:nth-child(2)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(2) p" ) );

    //get the fourth column and assign it the width of the elements in the forth column
    $( "#t3 tr th:nth-child(4)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(4) p" ) );
    $( "#t3 tr td:nth-child(4)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(4) p" ) );
});


function getMaxWidthOf(selector){
    var maxWidth = 0;
    //go through each paragraph in the right column and find the widest value.
    $(selector).each(function() {
        if(maxWidth < $(this).width()){
            maxWidth = $(this).width();
        }
    });
    // assign max width to column
    return maxWidth;
}
</script>

<!-- add this style -->
<style type="text/css">
#t3 table {
    table-layout:fixed;
{
.innerParagraph {
    margin:0;
    display:inline-block;
}
</style>

Answer 3

我找到的解决方案是将您的单元格设置为如下样式：

td{
    white-space: nowrap;
}

td.description{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;    
    width: 100%;
}

第一部分将强制每一列尽可能地收缩，并椭圆化任何单元格中的任何剪切文本。但是，它们不会收缩到 1px，因为您可以使用表头来提供最小宽度。它还可以防止在表格内换行。

第二部分确保所有空闲空间都被描述列占用，而不是平均分布在所有列之间。

最后，如果您想在描述列上施加真正的最小宽度，请将最小宽度放在列标题而不是列单元格上，因为除了最大宽度之外，单元格不能收缩到比页眉更薄。

请参阅http://jsfiddle.net/BCZTB/ 了解实现。