javascript - 制作左侧有 3 个粘性列的可滚动表格（不重叠）
问题描述
我正在尝试创建表，该表将包含粘性标题和 3 个粘性列（在每一行上）。为此，我使用了带有预定义左属性值的位置粘性属性。我不知道如何解决的主要问题是如何确定每个左属性值的有效值（以确保当有人开始滚动元素时，列不会相互重叠）
这是我的 html/css 代码：
body {
margin: 0;
padding: 2rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr.red th {
background: red;
color: white;
}
tr.green th {
background: green;
color: white;
}
tr.purple th {
background: purple;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
right: 0;
z-index: 12;
}
tr td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
right: 0;
z-index: 2;
}
th:nth-child(2) {
position: -webkit-sticky;
position: sticky;
left: 20px;
z-index: 13;
}
tr td:nth-child(2) {
position: -webkit-sticky;
position: sticky;
left: 20px;
z-index: 3;
}
th:nth-child(3) {
position: -webkit-sticky;
position: sticky;
left: 40px;
z-index: 14;
}
tr td:nth-child(3) {
position: -webkit-sticky;
position: sticky;
left: 40px;
z-index: 4;
}<!DOCTYPE html>
<head>
<title>HTML and CSS "Hello World"</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr class="red">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
<td>Rerum?</td>
<td>Iusto?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
<td>Doloribus.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
<td>Ullam!</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Hic.</td>
<td>Id!</td>
<td>Officiis.</td>
<td>Modi!</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Ad!</td>
<td>Impedit.</td>
<td>Alias!</td>
<td>Ad.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>Quo.</td>
<td>Exercitationem!</td>
<td>Optio?</td>
<td>Ipsum?</td>
</tr>
<tr>
<td>Commodi!</td>
<td>Rem.</td>
<td>Aspernatur.</td>
<td>Accusantium!</td>
<td>Maiores.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Cumque?</td>
<td>Eveniet!</td>
<td>Mollitia?</td>
<td>Vero.</td>
</tr>
<tr>
<td>Error!</td>
<td>Inventore.</td>
<td>Quasi!</td>
<td>Ducimus.</td>
<td>Repudiandae!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>Necessitatibus.</td>
<td>Corrupti!</td>
<td>Eum.</td>
<td>Sunt!</td>
</tr>
<tr>
<td>Ea.</td>
<td>Culpa?</td>
<td>Quam?</td>
<td>Nemo!</td>
<td>Sit!</td>
</tr>
<tr>
<td>Veritatis!</td>
<td>Facilis.</td>
<td>Expedita?</td>
<td>Ipsam!</td>
<td>Omnis!</td>
</tr>
<tr>
<td>Vitae.</td>
<td>Cumque.</td>
<td>Repudiandae.</td>
<td>Ut?</td>
<td>Sed!</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>Adipisci.</td>
<td>Sit.</td>
<td>Maxime.</td>
<td>Harum.</td>
</tr>
</tbody>
</table>
</body>
</html>我可以访问以前的 td/th 表元素并获取当前宽度（这样我就可以为 left 属性设置有效值），还是有一些简单的方法可以让我避免某些元素开始重叠的情况？
解决方案
table {
font-size: 125%;
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
border: 1px solid black;
}
table td,
table th {
border: 1px solid black;
padding: 0;
white-space: nowrap;
}
table thead th {
padding: 0;
position: sticky;
top: 0;
z-index: 1;
background: white;
}
table td {
background: #fff;
text-align: center;
}
table tbody th {
font-weight: 100;
font-style: italic;
text-align: left;
}
table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
table tbody th {
position: sticky;
left: 0;
background: white;
z-index: 1;
}
/**/
table thead th:nth-child(2),
tr td:nth-child(2) {
position: sticky;
left: 178px;
z-index: 3;
}
table thead th:nth-child(3),
tr td:nth-child(3) {
position: sticky;
left: 278px;
z-index: 3;
}
table thead th:nth-child(2),
table thead th:nth-child(3){
top:0
}
tr th:nth-child(2){
left: 178px;
}
tr th:nth-child(3){
left: 278px;
}<div role="region" aria-labelledby="caption" tabindex="0">
<table>
<thead>
<tr>
<th>Teams</th>
<th>Sample text</th>
<th>text</th>
<th>abcd</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>Runs</th>
</tr>
</thead>
<tbody>
<tr>
<th>Milwaukee Brewers</th>
<th>sample text</th>
<th>text</th>
<td>abcd</td>
<td>2</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>1</td>
<td>9</td>
</tr>
<tr>
<th>Los Angles Dodgers</th>
<th>sample text</th>
<th>text</th>
<td>abcd</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>22</td>
</tr>
<tr>
<th>New York Mets</th>
<th>sample text</th>
<th>text</th>
<td>abcd</td>
<td>3</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>4</td>
<td>1</td>
<td>22</td>
</tr>
<tr>
<th>St. Louis Cardinals</th>
<th>sample text</th>
<th>text</th>
<td>abcd</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>4</td>
<td>3</td>
<td>0</td>
<td>23</td>
</tr>
<tr>
<th>Houston Astros</th>
<th>sample text</th>
<th>text</th>
<td>abcd</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>13</td>
</tr>
<tr>
<th>Toronto Blue Jays</th>
<th>sample text</th>
<th>text</th>
<td>2</td>
<td>2</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>20</td>
</tr>
<tr>
<th>Boston Red Sox</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>14</td>
</tr>
<tr>
<th>Chicago Cubs</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>2</td>
<td>4</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>4</td>
<td>23</td>
</tr>
<tr>
<th>Philadelphia Phillies</th>
<th>sample text</th>
<th>text</th>
<td>4</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<th>Chicago White Sox</th>
<th>sample text</th>
<th>text</th>
<td>4</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>1</td>
<td>20</td>
</tr>
<tr>
<th>San Diego Padres</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>23</td>
</tr>
<tr>
<th>Cleveland Indians</th>
<th>sample text</th>
<th>text</th>
<td>1</td>
<td>3</td>
<td>1</td>
<td>0</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>18</td>
</tr>
<tr>
<th>San Francisco Giants</th>
<th>sample text</th>
<th>text</th>
<td>4</td>
<td>3</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>14</td>
</tr>
<tr>
<th>Cincinatti Reds</th>
<th>sample text</th>
<th>text</th>
<td>4</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>29</td>
</tr>
<tr>
<th>Minnesota Twins</th>
<th>sample text</th>
<th>text</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>0</td>
<td>16</td>
</tr>
<tr>
<th>Tampa Bay Rays</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>0</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>4</td>
<td>21</td>
</tr>
<tr>
<th>Miami Marlins</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>3</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>19</td>
</tr>
<tr>
<th>Oakland Athletics</th>
<th>sample text</th>
<th>text</th>
<td>1</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>3</td>
<td>21</td>
</tr>
<tr>
<th>Detroit Tigers</th>
<th>sample text</th>
<th>text</th>
<td>1</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>4</td>
<td>20</td>
</tr>
<tr>
<th>Pittsburgh Pirates</th>
<th>sample text</th>
<th>text</th>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>13</td>
</tr>
<tr>
<th>Seattle Mariners</th>
<th>sample text</th>
<th>text</th>
<td>1</td>
<td>1</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>23</td>
</tr>
<tr>
<th>Atlanta Braves</th>
<th>sample text</th>
<th>text</th>
<td>3</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>推荐阅读
- c# - 从后台任务创建集合
- jupyter-notebook - 为什么我在项目 Watson Studio 中看不到笔记本？
- smalltalk - 在 Seaside 中获取父组件
- c# - 尝试使用 ajax 下载 Zip 文件，但无法在 asp.net mvc 中下载
- python - Python DataFrame 相关性超过 1.0？
- javascript - 在 DOM 可修改/可交互时运行 javascript
- json - 自动化 jira - 取回该字段的先前值
- python - 在python中为大字符串调用repr时如何删除省略号
- curl - AWS - Google / Cognito 身份验证 - cURL 调用 - 在没有 CLI 的情况下生成令牌
- angular - Angular - 如果字段发生更改则禁用它