一般的在使用table的时候都需要固定其宽度,单位px(像素)。

1、如果只是指定其宽度width,当内容增加的时候,表格的宽度会随着内容延长的,如下:

<table width="200px" border="1">         <tr>              <td>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td>         </tr> </table> 效果如下: Table固定宽度 - 星星 - 希夷之家

 不能达到预期效果 2、可以设置style中的“table-layout”为“fixed” 和“word-break”为“break-all”

<table width="200px" border="1" style="table-layout: fixed; word-break:break-all">             <tr>                  <td>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td>             </tr> </table>

效果如下:

Table固定宽度 - 星星 - 希夷之家

 3、如果要求不要换行,则只能隐藏一部分内容了,设置table的style中的“table-layout”为“fixed” 并设置td的style为“text-overflow”为“ellipsis”和“ overflow”为“hidden”     <table width="200px" border="1" style="table-layout: fixed;">             <tr>                  <td style="text-overflow:ellipsis; overflow: hidden;">TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td>             </tr>     </table>

效果如下: Table固定宽度 - 星星 - 希夷之家

 注:若要显示的内容含有中文或者字符则需使用<nobr>标签将内容包含进去

posted on 2013-04-15 11:08  超级大白  阅读(1224)  评论(0编辑  收藏  举报