![\"css](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175373449474530.jpeg\")
"}
table-layout: fixed 會(huì)強(qiáng)製表格列寬由第一行單元格寬度決定，避免內(nèi)容影響佈局。 1. 設(shè)置table-layout: fixed 並指定表格寬度；2. 為第一行th/td 設(shè)置具體列寬比例；3. 配合white-space: nowrap、overflow: hidden 和text-overflow: ellipsis 控製文本溢出；4. 適用於後臺(tái)管理、數(shù)據(jù)報(bào)表等需穩(wěn)定佈局和高性能渲染的場(chǎng)景，能有效防止佈局抖動(dòng)並提升渲染效率。
當(dāng)使用table-layout: fixed時(shí)，CSS 會(huì)改變HTML 表格的列寬計(jì)算方式，讓表格佈局更可預(yù)測(cè)、性能更好。下面是一個(gè)實(shí)用的table-layout: fixed示例，並解釋其作用和使用場(chǎng)景。
什麼是table-layout: fixed ？
默認(rèn)情況下，表格的table-layout是auto ，瀏覽器會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整列寬。而設(shè)置為fixed後，列寬僅由表格寬度和第一行單元格的寬度決定，後續(xù)單元格內(nèi)容不會(huì)影響列寬，從而提升渲染性能並避免佈局抖動(dòng)。
示例代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Fixed Table Layout 示例</title>
<style>
.fixed-table {
width: 100%;
table-layout: fixed; /* 關(guān)鍵：?jiǎn)⒂霉潭▉丫?/
border-collapse: collapse;
font-family: Arial, sans-serif;
}
.fixed-table th,
.fixed-table td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 防止文本換行*/
}
.fixed-table th {
background-color: #f0f0f0;
}
/* 手動(dòng)設(shè)置列寬*/
.fixed-table th:nth-child(1),
.fixed-table td:nth-child(1) {
width: 20%; /* 第一列佔(zhàn)20% */
}
.fixed-table th:nth-child(2),
.fixed-table td:nth-child(2) {
width: 30%; /* 第二列佔(zhàn)30% */
}
.fixed-table th:nth-child(3),
.fixed-table td:nth-child(3) {
width: 50%; /* 第三列佔(zhàn)50% */
}
</style>
</head>
<body>
<table class="fixed-table">
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>備註</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>前端開(kāi)發(fā)工程師</td>
<td>擅長(zhǎng)React 和Vue，代碼寫(xiě)得非常規(guī)範(fàn)</td>
</tr>
<tr>
<td>李四</td>
<td>UI設(shè)計(jì)師</td>
<td>設(shè)計(jì)稿細(xì)節(jié)完美，經(jīng)常加班改圖</td>
</tr>
<tr>
<td>王五</td>
<td>數(shù)據(jù)分析師</td>
<td>每天處理上百萬(wàn)條數(shù)據(jù)，報(bào)表生成自動(dòng)化</td>
</tr>
</tbody>
</table>
</body>
</html>使用table-layout: fixed的好處
- 佈局穩(wěn)定：列寬不會(huì)因?yàn)槟骋恍袃?nèi)容過(guò)長(zhǎng)而突然變化。
- 渲染更快：瀏覽器無(wú)需讀取全部?jī)?nèi)容即可確定列寬。
- 適合固定結(jié)構(gòu)表格：如後臺(tái)管理系統(tǒng)、數(shù)據(jù)報(bào)表等。
-
配合
text-overflow: ellipsis更好用：長(zhǎng)文本自動(dòng)截?cái)囡@示省略號(hào)。
注意事項(xiàng)
- 必須給表格設(shè)置
width，否則fixed佈局可能表現(xiàn)異常。 - 列寬主要由第一行（通常是
thead或第一行tr）的單元格決定。所以建議在th或第一行td上設(shè)置寬度。 - 如果第一行沒(méi)有設(shè)置寬度，瀏覽器會(huì)平均分配列寬。
- 內(nèi)容過(guò)長(zhǎng)時(shí)，記得配合
white-space: nowrap和overflow: hidden來(lái)控制顯示。
常見(jiàn)應(yīng)用場(chǎng)景
- 後臺(tái)管理表格（如用戶列表、訂單表）
- 固定列寬的數(shù)據(jù)展示界面
- 需要ellipsis 截?cái)嚅L(zhǎng)文本的表格
- 性能敏感的大型表格（成百上千行）
基本上就這些。 table-layout: fixed看似小技巧，但在實(shí)際開(kāi)發(fā)中非常實(shí)用，尤其當(dāng)你不想讓“某個(gè)單元格的超長(zhǎng)內(nèi)容”毀掉整個(gè)表格佈局時(shí)。
以上是CSS桌面固定示例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
在PHP中構(gòu)建不變的物體，並具有可讀的屬性
Jul 30, 2025 am 05:40 AM
ReadonlypropertiesinPHP8.2canonlybeassignedonceintheconstructororatdeclarationandcannotbemodifiedafterward,enforcingimmutabilityatthelanguagelevel.2.Toachievedeepimmutability,wrapmutabletypeslikearraysinArrayObjectorusecustomimmutablecollectionssucha
Java項(xiàng)目管理Maven的開(kāi)發(fā)人員指南
Jul 30, 2025 am 02:41 AM
Maven是Java項(xiàng)目管理和構(gòu)建的標(biāo)準(zhǔn)工具，答案在於它通過(guò)pom.xml實(shí)現(xiàn)項(xiàng)目結(jié)構(gòu)標(biāo)準(zhǔn)化、依賴管理、構(gòu)建生命週期自動(dòng)化和插件擴(kuò)展；1.使用pom.xml定義groupId、artifactId、version和dependencies；2.掌握核心命令如mvnclean、compile、test、package、install和deploy；3.利用dependencyManagement和exclusions管理依賴版本與衝突；4.通過(guò)多模塊項(xiàng)目結(jié)構(gòu)組織大型應(yīng)用並由父POM統(tǒng)一管理；5.配
用雅加達(dá)EE在Java建立靜止的API
Jul 30, 2025 am 03:05 AM
SetupaMaven/GradleprojectwithJAX-RSdependencieslikeJersey;2.CreateaRESTresourceusingannotationssuchas@Pathand@GET;3.ConfiguretheapplicationviaApplicationsubclassorweb.xml;4.AddJacksonforJSONbindingbyincludingjersey-media-json-jackson;5.DeploytoaJakar
如何將Java MistageDigest用於哈希（MD5，SHA-256）？
Jul 30, 2025 am 02:58 AM
要使用Java生成哈希值，可通過(guò)MessageDigest類實(shí)現(xiàn)。 1.獲取指定算法的實(shí)例，如MD5或SHA-256；2.調(diào)用.update()方法傳入待加密數(shù)據(jù)；3.調(diào)用.digest()方法獲取哈希字節(jié)數(shù)組；4.將字節(jié)數(shù)組轉(zhuǎn)換為十六進(jìn)製字符串以便讀??；對(duì)於大文件等輸入，應(yīng)分塊讀取並多次調(diào)用.update()；推薦使用SHA-256而非MD5或SHA-1以確保安全性。
在Java開(kāi)發(fā)區(qū)塊鏈應(yīng)用程序
Jul 30, 2025 am 12:43 AM
理解區(qū)塊鏈核心組件，包括區(qū)塊、哈希、鍊式結(jié)構(gòu)、共識(shí)機(jī)制和不可篡改性；2.創(chuàng)建包含數(shù)據(jù)、時(shí)間戳、前一哈希和Nonce的Block類，並實(shí)現(xiàn)SHA-256哈希計(jì)算與工作量證明挖礦；3.構(gòu)建Blockchain類管理區(qū)塊列表，初始化創(chuàng)世區(qū)塊，添加新區(qū)塊並驗(yàn)證鏈的完整性；4.編寫(xiě)主類測(cè)試區(qū)塊鏈，依次添加交易數(shù)據(jù)區(qū)塊並輸出鏈狀態(tài)；5.可選增強(qiáng)功能包括交易支持、P2P網(wǎng)絡(luò)、數(shù)字簽名、RESTAPI和數(shù)據(jù)持久化；6.可選用HyperledgerFabric、Web3J或Corda等Java區(qū)塊鏈庫(kù)進(jìn)行生產(chǎn)級(jí)開(kāi)
CSS暗模式切換示例
Jul 30, 2025 am 05:28 AM
首先通過(guò)JavaScript獲取用戶系統(tǒng)偏好和本地存儲(chǔ)的主題設(shè)置，初始化頁(yè)面主題；1.HTML結(jié)構(gòu)包含一個(gè)按鈕用於觸發(fā)主題切換；2.CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，並通過(guò)var()應(yīng)用這些變量；3.JavaScript檢測(cè)prefers-color-scheme並讀取localStorage決定初始主題；4.點(diǎn)擊按鈕時(shí)切換html元素上的dark-mode類，並將當(dāng)前狀態(tài)保存至localStorage；5.所有顏色變化均帶有0.3秒過(guò)渡動(dòng)畫(huà)，提升用戶
CSS下拉菜單示例
Jul 30, 2025 am 05:36 AM
是的，一個(gè)常見(jiàn)的CSS下拉菜單可以通過(guò)純HTML和CSS實(shí)現(xiàn)，無(wú)需JavaScript。 1.使用嵌套的ul和li構(gòu)建菜單結(jié)構(gòu)；2.通過(guò):hover偽類控制下拉內(nèi)容的顯示與隱藏；3.父級(jí)li設(shè)置position:relative，子菜單使用position:absolute進(jìn)行定位；4.子菜單默認(rèn)display:none，懸停時(shí)變?yōu)閐isplay:block；5.可通過(guò)嵌套實(shí)現(xiàn)多級(jí)下拉，結(jié)合transition添加淡入動(dòng)畫(huà)，配合媒體查詢適配移動(dòng)端，整個(gè)方案簡(jiǎn)潔且無(wú)需JavaScript支持，適合大
Python物業(yè)裝飾示例
Jul 30, 2025 am 02:17 AM
@property裝飾器用於將方法轉(zhuǎn)為屬性，實(shí)現(xiàn)屬性的讀取、設(shè)置和刪除控制。 1.基本用法：通過(guò)@property定義只讀屬性，如area根據(jù)radius計(jì)算並直接訪問(wèn)；2.進(jìn)階用法：使用@name.setter和@name.deleter實(shí)現(xiàn)屬性的賦值驗(yàn)證與刪除操作；3.實(shí)際應(yīng)用：在setter中進(jìn)行數(shù)據(jù)驗(yàn)證，如BankAccount確保餘額非負(fù)；4.命名規(guī)範(fàn)：內(nèi)部變量用_前綴，property方法名與屬性一致，通過(guò)property統(tǒng)一訪問(wèn)控制，提升代碼安全性和可維護(hù)性。
