CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口
這篇文章主要講解了“CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口”吧！
太白網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)建站于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
先了解幾個概念:
table-layout:
table-layout屬性有兩種特定值：
auto（預(yù)設(shè)值）-表格的總寬度決定每一個儲存格（cell）的最大值
fixed- 表格的總寬度決定于表格width的定義,以及各欄位（column）width的定義, 沒有定義寬度就平分表格寬度。
表格寬度通過表格的寬度來設(shè)置，某一列的寬度僅由該列首行的單元格決定，其他行單元格的寬度不會影響整列的寬度。
注意：自定義寬度要定義在首個單元格才有效果（th）
position : sticky
粘性定位可以被認(rèn)為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。
在目標(biāo)區(qū)域中可見時，他的行為就像relative 不會有任何變化，而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，他的表現(xiàn)改為fixed會固定于目標(biāo)位置
sticky元素會“固定”在離它最近的一個擁有“滾動機制”的祖先上（當(dāng)該祖先的overflow是hidden、scroll、auto、overlay時), 即便這個祖先不是最近的真實可滾動祖先。
要注意的是當(dāng)position : sticky應(yīng)用于table，只能作用于th和td，作用tr沒有效果，并且一定要定義目標(biāo)位置 left / right / top / bottom 才會出現(xiàn)固定效果！
實現(xiàn)：
1.自適應(yīng)
表格外包一層div，寬度100% ，溢出出現(xiàn)滾動條
.box {
width: 100%;
height: 200px;
background-color: #eee;
overflow: auto;
margin: 10px;
}表格table, 寬度100%， 設(shè)置一個最小寬度，我這里設(shè)置1000px，這個根據(jù)個人設(shè)定哈
table {
width: 100%;
min-width: 1000px;
/* 自定義寬度要設(shè)置成fixed */
table-layout: fixed;
/* 設(shè)置單元格間距 */
border-spacing:0;
}2.固定首行首列
需要在首行th 和首列設(shè)置粘性定位
首行設(shè)置
thead tr th {
/* th設(shè)置粘性定位 */
background-color: pink;
position: sticky;
top: 0;
/* 頂部border */
border-top: 1px solid black;
}首列設(shè)置
td:first-child {
/* td第一個粘性定位 */
position: sticky;
left: 0;
background-color: skyblue;
}如果需要改變單元格寬度，需要設(shè)置table-layout: fixed
這個屬性設(shè)置了默認(rèn)單元格平分table寬度，如果首列第一個單元格（th）設(shè)置了固定寬度200px，那么這列寬度就是200px
注意是第一個單元格
td:first-child,th:first-child {
/* 設(shè)置首列200 ,設(shè)置th才有效，這里加上td主要是為了設(shè)置Border*/
width: 200px;
border-left: 1px solid black;
}還有一個注意地方是 邊框border,要單獨設(shè)定每個單元格邊框border, 如果border collapse,滾動會跟著動,效果不好看。
整體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100%;
height: 200px;
background-color: #eee;
overflow: auto;
margin: 10px;
}
table {
width: 100%;
min-width: 1000px;
/* 自定義寬度要設(shè)置成fixed */
table-layout: fixed;
/* 設(shè)置單元格間距 */
border-spacing:0;
}
td,th {
border-bottom: 1px solid black;
border-right: 1px solid black;
box-sizing: border-box;
/* 超出長度顯示 ... */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td:first-child,th:first-child {
/* 設(shè)置首列200 ,設(shè)置th才有效*/
width: 200px;
border-left: 1px solid black;
}
/* 如果border collapse,滾動會跟著動，所以單獨給每個元素設(shè)置border */
td:last-child, th:last-child {
border-right: 1px solid black;
}
th:last-child, td:last-child {
border-right: 1px solid black;
}
.last td {
/* 最后一行底部border */
border-bottom: 1px solid black;
}
thead tr th {
/* th設(shè)置粘性定位 */
background-color: pink;
position: sticky;
top: 0;
/* 頂部border */
border-top: 1px solid black;
}
td:first-child {
/* td第一個粘性定位 */
position: sticky;
left: 0;
background-color: skyblue;
}
thead tr th:first-child {
/* 第一個由于要保持上下和左右滾動都不被覆蓋，設(shè)置在最上面 */
z-index: 1;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<table >
<thead>
<tr>
<th>姓名</th>
<th>學(xué)號</th>
<th>年齡</th>
<th>成績</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>可樂11111111111111111111111111111111111111111111111111111111</td>
<td>可樂11111111</td>
<td>可樂222222222</td>
<td>可樂333333333333333333333333333</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
<tr class="last">
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
<td>可樂</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>效果：（做的還不是很好，繼續(xù)加油）
感謝各位的閱讀，以上就是“CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
網(wǎng)頁題目：CSS如何實現(xiàn)表格首行首列固定和自適應(yīng)窗口
標(biāo)題來源：http://chinadenli.net/article8/pijdop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、網(wǎng)站營銷、網(wǎng)站設(shè)計、建站公司、App開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
