WEB應(yīng)用的頁(yè)面，表格的表現(xiàn)形式是常常遇到的，在列數(shù)有限的前提下，如何將各列中的內(nèi)容自適應(yīng)到不同分辨率的屏幕，這應(yīng)該是一個(gè)比較容易遇到的問(wèn)題，下面就來(lái)談一談我對(duì)這類問(wèn)題的解決與看法。

1， 自適應(yīng)寬度： 

td {

    width: 1px;

    white-space: nowrap; /* 自適應(yīng)寬度*/

    word-break:  keep-all; /* 避免長(zhǎng)單詞截?cái)?，保持全?*/

}

2，自適應(yīng)高度 

table {

      table-layout: fixed;

      width: 100%;

}

將所有列設(shè)置為固定寬度，顯然是不能滿足此類要求的，但是若把全部的列都設(shè)置為百分比，恐怕在某些尺寸，或分辨率下，會(huì)變得很難看。在Bigtree看來(lái)，比較習(xí)慣于用如下的方式來(lái)處理——在表格列數(shù)不是很多的前提下——將大部分列寬用固定值設(shè)置死，留下一列不設(shè)置寬度，將table的寬度設(shè)置為屏幕的百分比（譬如95%、98%等）。

例：

<table width="95%" border="1" cellpadding="2" cellspacing="1">

  <tr>

    <td width="50px" nowrap>序號(hào)</td>

    <td width="150px" nowrap>分類A</td>

    <td width="150px" nowrap>分類B</td>

    <td width="200px" nowrap>名稱</td>

    <td nowrap>說(shuō)明</td>

    <td width="100px" nowrap>操作</td>

  </tr>

  ……

</table>

在本例中，名為“說(shuō)明”的列，內(nèi)容比較長(zhǎng)，個(gè)人認(rèn)為可以將此列設(shè)置為浮動(dòng)寬度列，用以自適應(yīng)頁(yè)面的寬度。

但是當(dāng)該表格中出現(xiàn)長(zhǎng)度比列幅寬的半角字符時(shí)，td的寬度會(huì)被內(nèi)容撐破，應(yīng)該如何解決呢？

解決此問(wèn)題的方法是：在明細(xì)行的td中，追加style="word-wrap:break-word;"，這樣做可以使半角連續(xù)字符強(qiáng)制換行，不至于撐破列寬。

    例：

        <td align="left" width="150px" style="word-wrap:break-word;">

          ……

        </td> 

應(yīng)用此方法，針對(duì)設(shè)置了width寬度的td列可以解決，但是如果沒(méi)有設(shè)置寬度的td列，是無(wú)法生效還是會(huì)被撐破td的，應(yīng)該如何解決呢？

解決此問(wèn)題的方法是：在定義表格時(shí)，追加style="table-layout:fixed;"，這樣做可以使半角連續(xù)字符強(qiáng)制換行，不至于撐破列寬。需要注意的是，使用此參數(shù)后，不要輕易在tr(行)或td(列)中加入height屬性，會(huì)使table不再被內(nèi)容撐出適合的高度。

    例：

    <table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">

      ……

    </table>