table-layout的样式

table中不能设置超出范围不换行,展示为省略号的问题

将table-layout设置为fixed可以实现展示为省略号的问题

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. table.one
  5. {
  6. table-layout: automatic
  7. }
  8. table.two
  9. {
  10. table-layout: fixed
  11. }
  12. td {
  13.  overflow:hidden;
  14.  text-overflow: ellipsis;
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <table class="one" border="1" width="100%">
  21. <tr>
  22. <td width="20%">1000000000000000000000000000</td>
  23. <td width="40%">10000000</td>
  24. <td width="40%">100</td>
  25. </tr>
  26. </table>
  28. <br />
  30. <table class="two" border="1" width="100%">
  31. <tr>
  32. <td width="20%">1000000000000000000000000000</td>
  33. <td width="40%">10000000</td>
  34. <td width="40%">100</td>
  35. </tr>
  36. </table>
  38. </body>
  39. </html>