假设我在表格中的列是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>
如果我删除表格布局:固定;列宽是您期望的 – 根据内容调整大小.不幸的是,如果没有固定的布局,我就无法使省略号工作.我哪里错了?
解决方法
如果为td.ellipsis指定最大宽度,它应该可以工作.