![](/img/trans.png)
[英]Unable to apply border-top and border-bottom to the <tr> tag
[英]Table with sticker headers: Scrolling hides the border-top and border-bottom of the table headers
我有以下示例: https://plnkr.co/edit/05Hef47dumxZopRT
初始表格看起来不错,但是当表格垂直滚动时,header 单元格的边框被隐藏。
header 单元格采用此 class 样式:
.fixed_headers thead th {
position: sticky;
position: -webkit-sticky;
top: 0; /* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #efefef;
z-index: 10;
border: 1px solid #ccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background-clip: padding-box;
}
如果表格滚动,怎么可能显示 header 单元格的边框?
您可以重置顶部坐标并添加框阴影以与表格边框混合或在滚动时覆盖背景:
可能的更新:
.fixed_headers thead th {
position: sticky;
top: 1px; /* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #efefef;
z-index: 10;
border: 1px solid #ccc;
box-shadow:0 -1px #ccc;
}
下面的演示片段:
html * { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }.responsive-table-container { height: 300px; width: 800px; overflow: auto; } table { border-collapse: collapse; }.fixed_headers { width: 100%; }.fixed_headers thead tr { position: relative; }.fixed_headers td, .fixed_headers thead th { padding: 5px; text-align: left; white-space: nowrap; }.fixed_headers tbody tr:nth-child(even) { background-color: #f7f7f7; color: #000; }.fixed_headers thead th { position: sticky; top: 1px; /* REQUIRED: https://stackoverflow.com/a/43707215 */ background-color: #efefef; z-index: 10; border: 1px solid #ccc; box-shadow: 0 -1px #ccc, 0 1px #ccc; } tbody td { border: 1px solid #ccc;
<div class="responsive-table-container"> <table class="fixed_headers"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> <th>Column 8</th> <th>Column 9</th> <th>Column 10</th> <th>Column 11</th> <th>Column 12</th> <th>Column 13</th> <th>Column 14</th> <th>Column 15</th> <th>Column 16</th> <th>Column 17</th> <th>Column 18</th> <th>Column 19</th> <th>Column 20</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <td>Value 6</td> <td>Value 7</td> <td>Value 8</td> <td>Value 9</td> <td>Value 10</td> <td>Value 11</td> <td>Value 12</td> <td>Value 13</td> <td>Value 14</td> <td>Value 15</td> <td>Value 16</td> <td>Value 17</td> <td>Value 18</td> <td>Value 19</td> <td>Value 20</td> </tr> </tbody> </table> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.