【基礎】固定列寬的表格及示例演示

ZHAO_ 發布于2019-08-29 16:24 / 3457人閱讀

摘要：對我來說其效果十分的怪異，具體見如下演示查看演示效果屬性值應用之后，查看演示效果，可以得出如下結論給單元格指定的寬度值生效屬性生效屬性生效查看演示效果用例及分析我們以一個用戶信息表格為例子進行演示。

引言

對我來說，table 有一個非常有用，支持性也很好的 CSS 屬性，但它卻很少為人所知。它改變了表格的渲染方式，并生成一個更加穩定可靠的布局。

它就是：

table {
  table-layout: fixed;
}

table-layout的缺省值是 auto，這個屬性值及其效果大家十分熟悉。對我來說其效果十分的怪異，具體見如下演示：

查看演示效果

fixed屬性值

應用 table-layout： fixed之后，查看演示效果，可以得出如下結論：

給單元格指定的寬度值生效

overflow 屬性生效

text-overlfow 屬性生效

查看演示效果

用例及分析

我們以一個用戶信息表格為例子進行演示。該表格的列寬是固定的，不根據內容的多少而變化；表格內容不折行顯示，超出行寬部分加省略號部分顯示。

查看演示效果

上述表格的顯示效果已經很好了，也比較接近實際項目的需要。

固定列寬的表格算法效果更容易預見，便于使用，同時渲染速度明顯更快。因為表格的內容并不會影響單元格的寬度，所以在頁面加載過程中，表格不需要頻繁重繪。相信我們都對頁面加載過程中表格不斷重新調整列寬的恐怖情景記憶猶新。對于固定列寬的表格來說，這種情況就不會發生了。

本文主要匯編自 Chris Coyier 的一篇博客。但是因為本人水平有限，文中難免存在描述不清，代碼不完善等問題，還請大家多多予以批評指正！

參考文獻

Fixed Table Layouts

MDN table-layout

CSS-trick table-layout

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113725.html

css的結構與布局

摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...

GeekQiaQia 2019-08-29 12:25 評論0 收藏0
[CSS]《CSS揭秘》第七章——結構與布局

摘要：精確控制表格列寬請注意，為了確保這個技巧奏效，需要為這些表格元素指定一個寬度哪怕是。同樣，為了讓發揮作用，我們還需要為那一列指定寬度。自適應內部元素 figure{ max-width: 300px; max-width: min-content;//這個關鍵字將解析為這個容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素。 mar...

Andrman 2019-08-30 15:54 評論0 收藏0
實現datatable表格第一列在手機端固定

摘要：自用筆記，如有錯誤請指正。這點很關鍵，一開始我作出的效果整個都是不對齊的。這個選項空著列寬的時候，手機端好像并不適用，需要注意一下，所以才出現了中控制文字不換行這個操作，這一步也是官方文檔推薦的參考鏈接官方文檔自用筆記，如有錯誤請指正。

Blackjun 2019-08-23 16:42 評論0 收藏0
支持多框架的組件庫KPC 1.0正式發布

摘要：自從年月份對外公布以來，已經經過了個月的迭代，期間發布了幾十個正式版本，但一直沒有到，因為我們覺得是個里程碑版本，我們必須做的足夠完善才敢稱之為。自從17年11月份對外公布以來，KPC已經經過了8個月的迭代，期間發布了幾十個正式版本，但一直沒有到1.0，因為我們覺得1.0是個里程碑版本，我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對外宣布：KPC 1.0終于來了！其實距離...

劉厚水 2019-08-26 10:10 評論0 收藏0