工作中遇到的自適應(yīng)表格，實現(xiàn)過程并不順暢，花費(fèi)了一些功夫。將其中不熟悉的技術(shù)點總結(jié)如下，期待下次可以行云流水的做出來。

1、自適應(yīng)表格如何實現(xiàn)文本溢出點點的效果自適應(yīng)的表格，由于單元格的" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > table布局的一些總結(jié)

table布局的一些總結(jié)

時間：2023-09-08 07:06:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-08 07:06:01 來源：網(wǎng)站運(yùn)營

table布局的一些總結(jié)：

工作中遇到的自適應(yīng)表格，實現(xiàn)過程并不順暢，花費(fèi)了一些功夫。將其中不熟悉的技術(shù)點總結(jié)如下，期待下次可以行云流水的做出來。

1、自適應(yīng)表格如何實現(xiàn)文本溢出點點的效果

自適應(yīng)的表格，由于單元格的流動性，文字不存在溢出這樣情況，如下圖所示：




如何解決自適應(yīng)表格內(nèi)容過多將布局撐亂的情況？
給table標(biāo)簽加如下css聲明：

table-layout: fixed;table-layout作用就是讓表格布局固定，使表格的寬度不會根據(jù)內(nèi)容多少而動態(tài)變化。 設(shè)置了 table-layout：fixed后的效果：




2、td不用設(shè)置height

單元格內(nèi)容太多，會出現(xiàn)內(nèi)容折行限制，將td撐高，所有設(shè)置 height 沒有意義。




如何設(shè)置td的初始高度
設(shè)置 td 初始高度最好用 padding 進(jìn)行設(shè)置，考慮到了單元格被撐開的情況。 可如下設(shè)置：

.table td, .table th { padding: 5px 10px;}

3、表格的邊框問題

給th、td都設(shè)置了border后會出現(xiàn)如下情形：




如何讓表格的邊框重疊
給table設(shè)置如下css：

table { border-collapse: collapse; border-spacing: 0;}border-collapse：可以讓單元格的之間共享邊框 border-spacing：消除單元格之間的間距

關(guān)鍵詞：總結(jié),布局

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉