Table 有两个粘性 headers
Table with two sticky headers
我正在尝试创建一个 table,其中包含两个粘性 header 和一个左侧粘性列,当我们滚动到水平时它工作正常,同时垂直和水平滚动,第二个 header(第二行与左列重叠)无法正常工作,有人可以帮我吗?我正在附上屏幕截图,这是有效的 link。
JSFiddle Link 是:https://jsfiddle.net/rqpra89s/
看看我为你制作的这个版本。我只使用 css 来处理重要的内容,而且效果很好。我也在容器滚动上添加了一个使用 js 的 class。
希望对您有所帮助。
https://jsfiddle.net/bcwhqueu/3/
.table__side {
left: 0; top: 0;
position: absolute;
transition: box-shadow 0.25s ease;
width: 8.0625rem;
z-index: 1;
}
这是仅使用 CSS 的列和行粘性 headers 示例。您可以查看更多信息 here.
/* set some spacing (optional)*/
td,
th {
padding: 20px;
}
/* style columns table headings*/
th[scope=col] {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background-color: teal;
}
/* style columns headings first element*/
th[scope=col]:nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
background-color: peru;
}
/* style rows table headings*/
th[scope=row] {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
background-color: chocolate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales</title>
</head>
<body>
<h1>ACME Company</h1>
<table>
<tr>
<th scope="col">Sales by Country</th>
<th scope="col">January</th>
<th scope="col">February</th>
<th scope="col">March</th>
<th scope="col">April</th>
<th scope="col">May</th>
<th scope="col">June</th>
<th scope="col">July</th>
<th scope="col">August</th>
<th scope="col">September</th>
<th scope="col">October</th>
<th scope="col">November</th>
<th scope="col">December</th>
</tr>
<tr>
<th scope="row">Portugal</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Spain</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">France</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Germany</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Italy</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Poland</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Austria</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">United States</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">England</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Scotland</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Wales</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
</table>
</body>
</html>
我正在尝试创建一个 table,其中包含两个粘性 header 和一个左侧粘性列,当我们滚动到水平时它工作正常,同时垂直和水平滚动,第二个 header(第二行与左列重叠)无法正常工作,有人可以帮我吗?我正在附上屏幕截图,这是有效的 link。
JSFiddle Link 是:https://jsfiddle.net/rqpra89s/
看看我为你制作的这个版本。我只使用 css 来处理重要的内容,而且效果很好。我也在容器滚动上添加了一个使用 js 的 class。
希望对您有所帮助。
https://jsfiddle.net/bcwhqueu/3/
.table__side {
left: 0; top: 0;
position: absolute;
transition: box-shadow 0.25s ease;
width: 8.0625rem;
z-index: 1;
}
这是仅使用 CSS 的列和行粘性 headers 示例。您可以查看更多信息 here.
/* set some spacing (optional)*/
td,
th {
padding: 20px;
}
/* style columns table headings*/
th[scope=col] {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background-color: teal;
}
/* style columns headings first element*/
th[scope=col]:nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
background-color: peru;
}
/* style rows table headings*/
th[scope=row] {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
background-color: chocolate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales</title>
</head>
<body>
<h1>ACME Company</h1>
<table>
<tr>
<th scope="col">Sales by Country</th>
<th scope="col">January</th>
<th scope="col">February</th>
<th scope="col">March</th>
<th scope="col">April</th>
<th scope="col">May</th>
<th scope="col">June</th>
<th scope="col">July</th>
<th scope="col">August</th>
<th scope="col">September</th>
<th scope="col">October</th>
<th scope="col">November</th>
<th scope="col">December</th>
</tr>
<tr>
<th scope="row">Portugal</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Spain</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">France</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Germany</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Italy</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Poland</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Austria</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">United States</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">England</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Scotland</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
<tr>
<th scope="row">Wales</th>
<td>50.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
<td>52.000</td>
</tr>
</table>
</body>
</html>