英文:
How can I preserve the right border of a fixed column in HTML tables while scrolling?
问题
Here is the translated code portion:
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
td:first-child,
th:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
td:nth-child(2),
th:nth-child(2) {
position: sticky;
left: 40px;
z-index: 1;
background-color: white;
border-right: 1px solid black;
}
.tableFixHead th {
position: sticky;
top: 0;
background: #eee;
z-index: 2
}
th:first-child,
th:nth-child(2) {
z-index: 3
}
Please note that the HTML part of your code is already in English, so there's no need to translate it. If you have any further questions or need more assistance, feel free to ask.
英文:
sandbox: https://codepen.io/test41564/pen/mdzaRrV
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
td:first-child,
th:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
td:nth-child(2),
th:nth-child(2) {
position: sticky;
left: 40px;
z-index: 1;
background-color: white;
border-right: 1px solid black;
}
.tableFixHead th {
position: sticky;
top: 0;
background: #eee;
z-index: 2
}
th:first-child,
th:nth-child(2) {
z-index: 3
}
<!-- language: lang-html -->
<div class="tableFixHead">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>01-11</th>
<th>02-11</th>
<th>03-11</th>
<th>04-11</th>
<th>05-11</th>
<th>06-11</th>
</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jack</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>2</td>
<td>Michel</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>Amanda</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>Amanda</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
I've tried a few tricks such as trying to set:
td:nth-child(2),
th:nth-child(2) {
position: sticky;
border-right: 1px solid black;
}
But this doesn't get preserved while scrolling. I've tried to use pseudo elements like ::before which I think is the key to do this but I'm unable to figure this out. I've even asked AI for help but nope, so now I'm trying stackoverflow if anyone else here knows whether this is possible.
答案1
得分: 0
这是您提供的内容的翻译：
这是因为 border-collapse: collapse;。
th 和 td 与它们的兄弟元素共享边框。
尝试使用 border-collapse: separate;。
英文:
That's because border-collapse: collapse;.
th & td share borders with their siblings.
Try border-collapse: separate;.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tableFixHead table {
border-collapse: separate;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
td:first-child,
th:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
td:nth-child(2),
th:nth-child(2) {
position: sticky;
left: 40px;
z-index: 1;
background-color: white;
border-right: 1px solid black;
}
.tableFixHead th {
position: sticky;
top: 0;
background: #eee;
z-index: 2
}
th:first-child,
th:nth-child(2) {
z-index: 3
}
<!-- language: lang-html -->
<div class="tableFixHead">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>01-11</th>
<th>02-11</th>
<th>03-11</th>
<th>04-11</th>
<th>05-11</th>
<th>06-11</th>
</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jack</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>2</td>
<td>Michel</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>Amanda</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>Amanda</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论