在這個JSfiddle中你可以看到效果。向下滾動時，頂部邊框移動 1 像素。我不知道如何阻止這一切。如果向右滾動，左邊框也會執(zhí)行相同的操作。我希望邊界始終保持可見。我嘗試添加“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>
2 回答
aluckdog
TA貢獻1847條經(jīng)驗 獲得超7個贊
為什么要在表中應用邊框，您可以做一件事：將邊框應用到表的父元素，就像在您的情況下它是 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
TA貢獻1824條經(jīng)驗 獲得超6個贊
溫馨提示：
<table>我發(fā)現(xiàn)將 CSS 從 HTML 中分離出來后，處理起來就容易多了。將表示 （CSS）和結(jié)構(gòu) （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>
- 2 回答
- 0 關(guān)注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消