html – 如何在流体宽度表中使用省略号而不使每列具有相同的大小

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

我希望列的大小合适,而不是每列的大小相同.当窗口太小而不能完全适合内容时,我希望描述列溢出到省略号.

表格的布局：固定;是文本溢出的标准方法：省略号;工作,但它将所有列的大小调整为相同的大小.我宁愿保持宽度自动而不是固定.

你能帮我吗？

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

这是我正在处理的截图：

请注意表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>

如果我删除表格布局：固定;列宽是您期望的 – 根据内容调整大小.不幸的是,如果没有固定的布局,我就无法使省略号工作.我哪里错了？

解决方法

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!