Table固定宽度

一般的在使用table的时候都需要固定其宽度，单位px（像素）。

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

<table width="200px" border="1">         <tr>              <td>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td>         </tr> </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>

效果如下：

 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>

效果如下：

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