溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
對我來說，table 有一個非常有用，支持性也很好的 CSS 屬性，但它卻很少為人所知。它改變了表格的渲染方式，并生成一個更加穩(wěn)定可靠的布局。
它就是：
table {
table-layout: fixed;
}table-layout的缺省值是 auto，這個屬性值及其效果大家十分熟悉。對我來說其效果十分的怪異，具體見如下演示：
查看演示效果
fixed屬性值應(yīng)用 table-layout： fixed之后，查看演示效果，可以得出如下結(jié)論：
overflow 屬性生效text-overlfow 屬性生效查看演示效果
我們以一個用戶信息表格為例子進(jìn)行演示。該表格的列寬是固定的，不根據(jù)內(nèi)容的多少而變化；表格內(nèi)容不折行顯示，超出行寬部分加省略號部分顯示。
查看演示效果
上述表格的顯示效果已經(jīng)很好了，也比較接近實(shí)際項目的需要。
固定列寬的表格算法效果更容易預(yù)見，便于使用，同時渲染速度明顯更快。因為表格的內(nèi)容并不會影響單元格的寬度，所以在頁面加載過程中，表格不需要頻繁重繪。相信我們都對頁面加載過程中表格不斷重新調(diào)整列寬的恐怖情景記憶猶新。對于固定列寬的表格來說，這種情況就不會發(fā)生了。
本文主要匯編自 Chris Coyier 的一篇博客。但是因為本人水平有限，文中難免存在描述不清，代碼不完善等問題，還請大家多多予以批評指正！
參考文獻(xiàn)
Fixed Table Layouts
MDN table-layout
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼