为什么固定位置表格在滚动时会移动边框的前 1 像素？
在这个JSfiddle中你可以看到效果。向下滚动时，顶部边框移动 1 像素。我不知道如何阻止这一切。如果向右滚动，左边框也会执行相同的操作。我希望边界始终保持可见。我尝试添加“box-sizing: border-box;” 无济于事。我根本无法阻止这种行为。
https://jsfiddle.net/jqn7m0ta/
代码（来自上面的 JSfiddle）：
<div style="height:500px; margin-top:2rem; margin-bottom:2rem; overflow-x:scroll; overflow-y:scroll;">
<table style="border:1px solid #e8e8e8; font-size:1rem; margin:0; padding:0; table-layout:fixed; width:100%;">
<thead>
<tr>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
a
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
b
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
c
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
d
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
e
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
f
</th>
<th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">
g
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#e8e8e8; height:1000px">1</td>
<td style="height:1000px">2</td>
<td style="background-color:#e8e8e8; height:1000px">3</td>
<td style="height:1000px">4</td>
<td style="background-color:#e8e8e8; height:1000px">5</td>
<td style="height:1000px">6</td>
<td style="background-color:#e8e8e8; height:1000px">7</td>
</tr>
</tbody>
</table>
</div>
德玛西亚992回答
-
aluckdog
为什么要在表中应用边框，您可以做一件事：将边框应用到表的父元素，就像在您的情况下它是 DIV 元素一样。HTML Table 元素的默认 border-spacing:2px 因此您还需要将其修改为 0px。这是代码供您参考<div style="border:1px solid #e8e8e8; height:500px; margin-top:2rem; margin-bottom:2rem; overflow-x:scroll; overflow-y:scroll;"> <table style="border-spacing: 0px; font-size:1rem; margin:0; padding:0; table-layout:fixed; width:100%;"> <thead> <tr> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> a </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> b </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> c </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> d </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> e </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> f </th> <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;"> g </th> </tr> </thead> <tbody> <tr> <td style="background-color:#e8e8e8; height:1000px">1</td> <td style="height:1000px">2</td> <td style="background-color:#e8e8e8; height:1000px">3</td> <td style="height:1000px">4</td> <td style="background-color:#e8e8e8; height:1000px">5</td> <td style="height:1000px">6</td> <td style="background-color:#e8e8e8; height:1000px">7</td> </tr> </tbody> </table></div> -
慕妹3242003
温馨提示：<table>我发现将 CSS 从 HTML 中分离出来后，处理起来就容易多了。将表示 （CSS）和结构 （HTML）以及行为 （JS）分开绝对是一个很好的做法。进一步阅读： 为什么将 CSS 与 HTML 分开很重要？四个步骤：删除边框并将<table>边框添加到父<div>级添加border-spacing: 0到<table>添加border: 2px solid #fff到所有<th>元素将border: 2px solid #fff 和 border-top: 0px;添加到所有<td>元素工作示例：body { overflow-y: hidden;}.container { position: relative; height: 500px; margin: 2rem 0; overflow-x: hidden; overflow-y: scroll; border: 1px solid #e8e8e8;}.container table { width: 100%; margin: 0; padding: 0; font-size: 1rem; table-layout: fixed; border-spacing: 0;}.container table th { position: sticky; top: 0; width: 150px; height: 20px; color: #000; font-weight: bold; background-color: #f9f9f9; border: 2px solid #fff;}.container table td { height: 1000px; text-align: center; border: 2px solid #fff; border-top: 0px;}.container table td:nth-of-type(odd) {background-color: #e8e8e8;}<div class="container"><table><thead><tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th><th>g</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr></tbody></table></div>
随时随地看视频慕课网APP
相关分类
Html5