怎么可以固定table的寬度 table-layout: fixed
發表時間:2024-05-05 來源:明輝站整理相關軟件相關文章人氣:
[摘要]這次給大家帶來怎樣可以固定table的寬度 table-layout: fixed,固定table的寬度 table-layout: fixed的注意事項有哪些,下面就是實戰案例,一起來看一下。為了讓表格能夠填充屏幕(剩余空白區域),常將其寬度屬性定義為:100%,單元格也是用百分數來定義。 但這...
這次給大家帶來怎樣可以固定table的寬度
table-layout: fixed,固定table的寬度 table-layout: fixed的
注意事項有哪些,下面就是實戰案例,一起來看一下。
為了讓表格能夠填充屏幕(剩余空白區域),常將其寬度屬性定義為:100%,單元格也是用百分數來定義。
但這樣就會出現問題: 如果單元格中的文本超過寬度限制,就會自動換行,高度自動增高,導致整個表格的樣式參差不齊,很難看。
很容易想到的解決方法是,禁用文本換行: white-space:nowrap; overflow:hidden;
So easy! 但效果仍然出乎意料:文本全部在一行顯示,寬度自動加寬,甚至還超出了父容器,overflow完全沒有起作用!
怎么回事? 百分比的原因么? 但是如果使用靜態的固定寬度,就失去了表格的靈活性。
于是乎,不費吹飛之力地找到了終極解決方案: 固定表格寬度: table-layout: fixed;
順便做了個簡易的效果圖,參考下:

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
怎樣讓html的下拉菜單提交后保留選中值不返回默認值
分割線hr在不同瀏覽器中有什么區別
以上就是怎樣可以固定table的寬度 table-layout: fixed的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。