資訊專欄INFORMATION COLUMN
摘要：對(duì)我來(lái)說(shuō)其效果十分的怪異，具體見(jiàn)如下演示查看演示效果屬性值應(yīng)用之后，查看演示效果，可以得出如下結(jié)論給單元格指定的寬度值生效屬性生效屬性生效查看演示效果用例及分析我們以一個(gè)用戶信息表格為例子進(jìn)行演示。
引言
對(duì)我來(lái)說(shuō)，table 有一個(gè)非常有用，支持性也很好的 CSS 屬性，但它卻很少為人所知。它改變了表格的渲染方式，并生成一個(gè)更加穩(wěn)定可靠的布局。
它就是：
table {
table-layout: fixed;
}
table-layout的缺省值是 auto，這個(gè)屬性值及其效果大家十分熟悉。對(duì)我來(lái)說(shuō)其效果十分的怪異，具體見(jiàn)如下演示：
查看演示效果
fixed屬性值應(yīng)用 table-layout： fixed之后，查看演示效果，可以得出如下結(jié)論：
給單元格指定的寬度值生效
overflow 屬性生效
text-overlfow 屬性生效
查看演示效果
用例及分析我們以一個(gè)用戶信息表格為例子進(jìn)行演示。該表格的列寬是固定的，不根據(jù)內(nèi)容的多少而變化；表格內(nèi)容不折行顯示，超出行寬部分加省略號(hào)部分顯示。
查看演示效果
上述表格的顯示效果已經(jīng)很好了，也比較接近實(shí)際項(xiàng)目的需要。
固定列寬的表格算法效果更容易預(yù)見(jiàn)，便于使用，同時(shí)渲染速度明顯更快。因?yàn)楸砀竦膬?nèi)容并不會(huì)影響單元格的寬度，所以在頁(yè)面加載過(guò)程中，表格不需要頻繁重繪。相信我們都對(duì)頁(yè)面加載過(guò)程中表格不斷重新調(diào)整列寬的恐怖情景記憶猶新。對(duì)于固定列寬的表格來(lái)說(shuō)，這種情況就不會(huì)發(fā)生了。
本文主要匯編自 Chris Coyier 的一篇博客。但是因?yàn)楸救怂接邢蓿闹须y免存在描述不清，代碼不完善等問(wèn)題，還請(qǐng)大家多多予以批評(píng)指正！
參考文獻(xiàn)
Fixed Table Layouts
MDN table-layout
CSS-trick table-layout
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113725.html
摘要：實(shí)際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時(shí)，等于，否則等于。基于的方法這種應(yīng)該算是最佳的解決辦法實(shí)現(xiàn)方法當(dāng)使用布局時(shí)，使用在水平和垂直方向都會(huì)居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個(gè)height值時(shí)，元素會(huì)自適應(yīng)其內(nèi)部的元素高度，有時(shí)我們想讓元素的寬度也達(dá)到此效果，應(yīng)用場(chǎng)景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開(kāi)的...
摘要：精確控制表格列寬請(qǐng)注意，為了確保這個(gè)技巧奏效，需要為這些表格元素指定一個(gè)寬度哪怕是。同樣，為了讓發(fā)揮作用，我們還需要為那一列指定寬度。 自適應(yīng)內(nèi)部元素 figure{ max-width: 300px; max-width: min-content;//這個(gè)關(guān)鍵字將解析為這個(gè)容器內(nèi)部最大的不可斷行元素的寬度（ 即最寬的單詞、 圖片或具有固定寬度的盒元素。 mar...
摘要：自用筆記，如有錯(cuò)誤請(qǐng)指正。這點(diǎn)很關(guān)鍵，一開(kāi)始我作出的效果整個(gè)都是不對(duì)齊的。這個(gè)選項(xiàng)空著列寬的時(shí)候，手機(jī)端好像并不適用，需要注意一下，所以才出現(xiàn)了中控制文字不換行這個(gè)操作，這一步也是官方文檔推薦的參考鏈接官方文檔 自用筆記，如有錯(cuò)誤請(qǐng)指正。
摘要：自從年月份對(duì)外公布以來(lái)，已經(jīng)經(jīng)過(guò)了個(gè)月的迭代，期間發(fā)布了幾十個(gè)正式版本，但一直沒(méi)有到，因?yàn)槲覀冇X(jué)得是個(gè)里程碑版本，我們必須做的足夠完善才敢稱之為。 自從17年11月份對(duì)外公布以來(lái)，KPC已經(jīng)經(jīng)過(guò)了8個(gè)月的迭代，期間發(fā)布了幾十個(gè)正式版本，但一直沒(méi)有到1.0，因?yàn)槲覀冇X(jué)得1.0是個(gè)里程碑版本，我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對(duì)外宣布：KPC 1.0終于來(lái)了！ 其實(shí)距離...
閱讀 1470·2021-09-03 10:29
閱讀 3484·2019-08-29 16:24
閱讀 2080·2019-08-29 11:03
閱讀 1448·2019-08-26 13:52
閱讀 2954·2019-08-26 11:36
閱讀 2816·2019-08-23 17:19
閱讀 582·2019-08-23 17:14
閱讀 838·2019-08-23 13:59
