當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

HTML頁面自適應(yīng)寬度的table表格

 2020-11-30 14:11  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

這篇文章主要介紹了HTML頁面自適應(yīng)寬度的table(表格),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

WEB應(yīng)用的頁面,表格的表現(xiàn)形式是常常遇到的,在列數(shù)有限的前提下,如何將各列中的內(nèi)容自適應(yīng)到不同分辨率的屏幕,這應(yīng)該是一個比較容易遇到的問題,下面就來談一談我對這類問題的解決與看法。 將所有列設(shè)置為固定寬度,顯然是不能滿足此類要求的,但是若把全部的列都設(shè)置為百分比,恐怕在某些尺寸,或分辨率下,會變得很難看。比較習(xí)慣于用如下的方式來處理——在表格列數(shù)不是很多的前提下——將大部分列寬用固定值設(shè)置死,留下一列不設(shè)置寬度,將table的寬度設(shè)置為屏幕的百分比(譬如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>

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

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

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

例:

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

應(yīng)用此方法,針對設(shè)置了width寬度的td列可以解決,但是如果沒有設(shè)置寬度的td列,是無法生效還是會被撐破td的,應(yīng)該如何解決呢?

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

例:

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

此方法適用于IE與FireFox瀏覽器。

到此這篇關(guān)于HTML頁面自適應(yīng)寬度的table(表格)的文章就介紹到這了,更多相關(guān)table自適應(yīng)寬度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來源:腳本之家

鏈接:https://www.jb51.net/web/730870.html

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html
頁面
自適應(yīng)
table用法

相關(guān)文章

熱門排行

信息推薦