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

假设我在表中的列是

id

、

name

、

description

和

phone

。

description

列为1-255个字符，但id最多只能包含3个字符

我希望列的大小适当，而不是每个列的大小相同。当窗口太小，无法容纳全部内容时，我希望

description

列溢出到省略号

表格布局：固定

是使

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

你能帮忙吗

这是我的：

以下是我正在处理的问题的屏幕截图：


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

注意
表2如何根据内容调整列的大小？那很好。内容过长时除外：
表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>


身份证件
名称
描述
电话
1.
阿尔法
Lorem ipsum dolor sit amet，是一位杰出的献身者。
555-555-5555
2.
贝塔
这是我的错。
555-555-5555
3.
伽马射线
莫比·内克·奥雷姆·朗库斯·酵母菌。
555-555-5555
#t1表{
表布局：固定；
宽度：100%；
}
#t1-td{
空白：nowrap；
}
#省略号{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
单词break：打破一切；
单词包装：打断单词；
}

如果我删除
表格布局：固定列宽是您所期望的-大小与内容相符。不幸的是，如果没有固定的布局，我就无法使用省略号。哪里出错了？
如果为
td指定
最大宽度，应该可以。省略号
我的解决方案是使用jquery获取列中文本的最大宽度，并将其分配给内容宽度，省略号列除外，它将是最大的大小

我的JSFIDLE示例可以在这里找到


$（函数（）{
//将InnerParague块元素添加到除具有类省略号的列之外的所有列
$（“#t3 tr td:not（.省略号）”）.wrapInner（function（）{
返回“
”；
});
//获取第一列并为其指定第一列中元素的宽度
$（“#t3 tr第n个孩子（1）”）.width（getMaxWidthOf（“#t3 tr>td:n个孩子（1）p”）；
$（“#t3 tr td:nth child（1）”）.width（getMaxWidthOf（“#t3 tr>td:nth child（1）p”）；
//获取第二列并为其指定第二列中元素的宽度
$（“#t3 tr第n个孩子（2）”）.width（getMaxWidthOf（“#t3 tr>td:n个孩子（2）p”）；
$（“#t3 tr td:nth child（2）”）.width（getMaxWidthOf（“#t3 tr>td:nth child（2）p”）；
//获取第四列并为其指定第四列中元素的宽度
$（“#t3 tr第四个：第四个孩子（4）”）.width（getMaxWidthOf（“#t3 tr>td:第四个孩子（4）p”）；
$（“#t3 tr td:nth child（4）”）.width（getMaxWidthOf（“#t3 tr>td:nth child（4）p”）；
});
函数getMaxWidthOf（选择器）{
var maxWidth=0；
//浏览右栏中的每一段，找出最宽的值。
$（选择器）。每个（函数（）{
如果（maxWidth<$（this）.width（））{
maxWidth=$（this.width（）；
}
});
//为列指定最大宽度
返回最大宽度；
}
#t3表{
表布局：固定；
{
.内段{
保证金：0；
显示：内联块；
}
我找到的解决方案是按如下方式设置单元格的样式：

td{
    white-space: nowrap;
}

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

第一部分将强制每个列尽可能收缩，并省略任何单元格中的任何剪裁文本。但是，它们不会收缩到1px，因为您可以使用表格标题提供最小宽度。这还可以防止表格中的换行

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

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

有关实现，请参阅。
Nice！这确实有帮助。但是，其他较小的列占用的空白空间比需要的要大得多。请查看更新的FIDLE：注意，表3现在具有省略号类的最大宽度。但是其他列比需要的大得多。有什么建议吗？我希望这些列看起来更大更像表2，但需要省略。您的解决方案与您的小提琴不匹配。（解决方案似乎正确。）在IE8中，这对我不起作用。使用
表格布局：fixed
，我得到相等的列。如果没有
表格布局：fixed
，则表格宽度大于100%。FIDLE不适用于IE9-表格宽度大于100%，将显示完整内容而不是省略号。
td{
    white-space: nowrap;
}

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