表头位置:粘性和边框问题 [英] Table headers position:sticky and border issue

问题描述

我有一个表格，我正在尝试获取粘性标题，遵循 这篇文章.除了我的表格样式的顶部和底部带有边框的标题.

我不明白的部分是应用于 th 的顶部/底部边框与表格的其余部分一起滚动，而不是停留在卡住"位置.标题单元格.有什么办法可以解决这个问题吗?

可以在此处找到工作示例:https://codepen.io/smlombardi/pen/MNKqQY?editors=1100#0

let string = ''控制台日志(oj")for(让 i=0; i<100; i++) {字符串 += `<tr><td>马尔科姆·雷诺兹</td><td>船长</td><td>9035749867</td><td>mreynolds</td></tr>`}document.getElementsByTagName('tbody')[0].innerHTML += string

.table-sticky-container {高度:200px；溢出-y:滚动；边框顶部:1px 纯绿色；边框底部:1px 纯绿色；}.table-sticky {第 {位置:粘性；顶部:0；z-索引:2；边框顶部:1px 纯红色！重要；边框底部:2px 纯红色！重要；}}

<table class="table table-sticky"><thead class="thead-light"><tr><th scope="col">Name</th><th scope="col">Title</th><th scope="col">ID</th><th scope="col">用户名</th></tr></thead><tr><td>马尔科姆·雷诺兹</td><td>船长</td><td>9035749867</td><td>mreynolds</td></tr></tbody>

解决方案

可以添加

.table {边框折叠:分开；}

但不幸的是它看起来很糟糕，更好的解决方案是使用伪元素添加解决方法.

th:after,日:之前{内容: '';位置:绝对；左:0；宽度:100%；}日:之前{顶部:-1px；边框顶部:1px 纯红色；}次:在{之后底部:-1px；边框底部:2px 纯红色；}

.table-sticky-container {高度:200px；溢出-y:滚动；边框顶部:1px 纯绿色；边框底部:1px 纯绿色；}.table-sticky th {位置:-webkit-sticky；位置:粘性；顶部:0；z-索引:2；}th:之后，日:之前{内容: '';位置:绝对；左:0；宽度:100%；}日:之前{顶部:-1px；边框顶部:1px 纯红色；}次:在{之后底部:-1px；边框底部:2px 纯红色；}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'><div class="table-sticky-container"><table class="table table-sticky"><thead class="thead-light"><tr><th scope="col">Name</th><th scope="col">Title</th><th scope="col">ID</th><th scope="col">用户名</th></tr></thead><tr><td>马尔科姆·雷诺兹</td><td>船长</td><td>9035749867</td><td>mreynolds</td></tr><tr><td>佐伊沃什伯恩</td><td>副驾驶</td><td>8908980980</td><td>zwashburne</td></tr><tr><td>凯莉·弗莱</td><td>工程师</td><td>6678687678</td><td>kfrye</td></tr><tr><td>马尔科姆·雷诺兹</td><td>船长</td><td>9035749867</td><td>mreynolds</td></tr><tr><td>佐伊沃什伯恩</td><td>副驾驶</td><td>8908980980</td><td>zwashburne</td></tr><tr><td>凯莉·弗莱</td><td>工程师</td><td>6678687678</td><td>kfrye</td></tr></tbody>

第二种方案

.table {边框折叠:折叠；}.table-sticky 头 th {位置:-webkit-sticky；位置:粘性；顶部:0；z-索引:2；框阴影:插入 0 1px 0 红色，插入 0 -2px 0 红色；}

I have a table that I'm trying to get sticky headers, following this article. Except my table style has the headers with a border at the top and bottom.

The part I do not understand is that the top/bottom borders applied to the th scroll away with the rest of the table instead of staying with the "stuck" header cells. Is there anything that can be done about this?

Working sample can be found here: https://codepen.io/smlombardi/pen/MNKqQY?editors=1100#0

let string = ''
console.log("oj")
for(let i=0; i<100; i++) {
  string += `
        <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
  `
}
document.getElementsByTagName('tbody')[0].innerHTML += string

.table-sticky-container {
  height: 200px;
  overflow-y: scroll;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

.table-sticky {

  th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-top: 1px solid red !important;
    border-bottom: 2px solid red !important;
  }
}

<div class="table-sticky-container">
  <table class="table table-sticky">
    <thead class="thead-light">
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Title</th>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
    </tbody>
  </table>
</div>

解决方案

You can add

.table {
  border-collapse: separate;
}

But unfortunately it looks bad, a better solution will be adding a workaround using a pseudo-element.

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

.table-sticky-container {
  height: 200px;
  overflow-y: scroll;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

.table-sticky th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>

<div class="table-sticky-container">
    <table class="table table-sticky">
      <thead class="thead-light">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Title</th>
          <th scope="col">ID</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
        <tr>
          <td>Zoe Washburne</td>
          <td>First Officer</td>
          <td>8908980980</td>
          <td>zwashburne</td>
        </tr>
        <tr>
          <td>Kaylee Frye</td>
          <td>Engineer</td>
          <td>6678687678</td>
          <td>kfrye</td>
        </tr>
        <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
        <tr>
          <td>Zoe Washburne</td>
          <td>First Officer</td>
          <td>8908980980</td>
          <td>zwashburne</td>
        </tr>
        <tr>
          <td>Kaylee Frye</td>
          <td>Engineer</td>
          <td>6678687678</td>
          <td>kfrye</td>
        </tr>
      </tbody>
    </table>
  </div>

The second solution

.table {
  border-collapse: collapse;
}

.table-sticky thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 1px 0 red, inset 0 -2px 0 red;
 }

这篇关于表头位置:粘性和边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！