bootstrap表格寬度設定
阿新 • • 發佈:2019-01-08
http://blog.sina.com.cn/s/blog_66d8992d0100pb5i.html
如何設定HTML頁面自適應寬度的table(表格)
將所有列設定為固定寬度,顯然是不能滿足此類要求的,但是若把全部的列都設定為百分比,恐怕在某些尺寸,或解析度下,會變得很難看。在Bigtree看來,比較習慣於用如下的方式來處理——在表格列數不是很多的前提下——將大部分列寬用固定值設定死,留下一列不設定寬度,將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;",這樣做可以使半形連續字元強制換行,不至於撐破列寬。
例:
<td align="left" width="150px" style="word-wrap:break-word;">
……
</td>
應用此方法,針對設定了width寬度的td列可以解決,但是如果沒有設定寬度的td列,是無法生效還是會被撐破td的,應該如何解決呢?
解決此問題的方法是:在定義表格時,追加style="table-layout:fixed;"
例:
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
……
</table>
此方法適用於IE與FireFox瀏覽器。