這篇文章主要介紹了HTML頁面自適應寬度的table(表格),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
WEB應用的頁面，表格的表現形式是常常遇到的，在列數有限的前提下，如何將各列中的內容自適應到不同分辨率的屏幕，這應該是一個比較容易遇到的問題，下面就來談一談我對這類問題的解決與看法。 將所有列設置為固定寬度，顯然是不能滿足此類要求的，但是若把全部的列都設置為百分比，恐怕在某些尺寸，或分辨率下，會變得很難看。比較習慣于用如下的方式來處理——在表格列數不是很多的前提下——將大部分列寬用固定值設置死，留下一列不設置寬度，將table的寬度設置為屏幕的百分比（譬如95%、98%等）。
例：
<table width="95%" border="1" cellpadding="2" cellspacing="1">
<tr>
<td width="50px" nowrap>序號</td>
<td width="150px" nowrap>分類A</td>
<td width="150px" nowrap>分類B</td>
<td width="200px" nowrap>名稱</td>
<td nowrap>說明</td>
<td width="100px" nowrap>操作</td>
</tr>
……
</table>
在本例中，名為“說明”的列，內容比較長，個人認為可以將此列設置為浮動寬度列，用以自適應頁面的寬度。
但是當該表格中出現長度比列幅寬的半角字符時，td的寬度會被內容撐破，應該如何解決呢？
解決此問題的方法是：在明細行的td中，追加style="word-wrap:break-word;"，這樣做可以使半角連續(xù)字符強制換行，不至于撐破列寬。
例：
<td align="left" width="150px" style="word-wrap:break-word;">
……
</td>
應用此方法，針對設置了width寬度的td列可以解決，但是如果沒有設置寬度的td列，是無法生效還是會被撐破td的，應該如何解決呢？
解決此問題的方法是：在定義表格時，追加style="table-layout:fixed;"，這樣做可以使半角連續(xù)字符強制換行，不至于撐破列寬。需要注意的是，使用此參數后，不要輕易在tr(行)或td(列)中加入height屬性，會使table不再被內容撐出適合的高度。
例：
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
……
</table>
此方法適用于IE與FireFox瀏覽器。
到此這篇關于HTML頁面自適應寬度的table(表格)的文章就介紹到這了,更多相關table自適應寬度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/730870.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
