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

前端之家收集整理的这篇文章主要介绍了html – 如何在流体宽度表中使用省略号而不使每列具有相同的大小?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我在表格中的列是id,name,description和phone. description列为1-255个字符,但id最多只有3个字符.

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

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

你能帮我吗?

这是我的jsFiddlehttp://jsfiddle.net/RQhkk/1/

这是我正在处理的截图:

请注意表1如何使所有列的大小相同?那是糟糕的.

请注意表2如何根据内容调整列的大小?非常好.除非内容太长:表3.然后它不适合.在那种情况下,我希望它溢出到省略号.

这是我的html表和css代码

  1. <div id="t1">
  2. <table>
  3. <thead>
  4. <tr>
  5. <th>id</th>
  6. <th>name</th>
  7. <th class="ellipsis">description</th>
  8. <th>phone</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td>1</td>
  14. <td>alpha</td>
  15. <td class="ellipsis">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</td>
  16. <td>555-555-5555</td>
  17. </tr>
  18. <tr>
  19. <td>2</td>
  20. <td>beta</td>
  21. <td class="ellipsis">Sed et nulla neque.</td>
  22. <td>555-555-5555</td>
  23. </tr>
  24. <tr>
  25. <td>3</td>
  26. <td>gamma</td>
  27. <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
  28. <td>555-555-5555</td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </div>
  33.  
  34. <style>
  35. #t1 table {
  36. table-layout:fixed;
  37. width:100%;
  38. }
  39. #t1 td {
  40. white-space: nowrap;
  41. }
  42. #t1 td.ellipsis {
  43. overflow: hidden;
  44. white-space: nowrap;
  45. text-overflow: ellipsis;
  46. word-break: break-all;
  47. word-wrap: break-word;
  48. }
  49. </style>

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

解决方法

如果为td.ellipsis指定最大宽度,它应该可以工作.

猜你在找的HTML相关文章