Question

我有一个父母与DIV孩子。

TH必须是position：relative，以便它的子DIV可以与position：absolute。

对齐

然而，当我添加位置：相对于TH，它完全失去了它的边界属性。

无论是否存在TH文本内容，DIV，A或SVG，都会发生这种情况（参见标记）。

我想知道如何阻止这种奇怪的行为！谢谢。

$(function() {
  $(".table-body").scroll(function() {
    $(".table-header")[0].style.top = (this.scrollTop) + 'px';
  });
});

body {
  font-family: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

th,
tr,
td,
thead,
tbody {
  text-align: left;
  margin: 0 !important;
}

th,
td {
  padding: 16px 24px 16px 24px;
}

th a {
  position: relative;
  width: 24px;
  cursor: pointer;
  float: right;
  text-align: right;
}

svg * {
  transition: fill .2s ease;
}

.filters-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: red;
  height: 100px;
  width: 40px;
}

th a:hover>svg * {
  fill: #333333;
}

thead tr {
  height: 36px;
}

#bodytable tbody {
  display: block;
}

.table-header {
  position: relative;
  display: block;
}

.table-body {
  border: 1px solid #ccc;
  overflow: auto;
  height: 400px;
}

.header-cell {
  position: relative;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  min-width: 330px;
}

.body-cell {
  min-width: 330px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-body">
  <table id="bodytable">
    <thead class="table-header">
      <tr>
        <th class="header-cell col1">One
          <a>
            <svg x="0px" y="0px" width="4px" height="20px" viewBox="0 0 4 20" enable-background="new 0 0 4 20" xml:space="preserve">
								<circle fill="#666666" cx="2" cy="2" r="2"/>
								<circle fill="#666666" cx="2" cy="10" r="2"/>
								<circle fill="#666666" cx="2" cy="18" r="2"/>
							</svg>
          </a>
          <div class="filters-menu"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="body-cell col1">body row1</td>
      </tr>
    </tbody>
  </table>
</div>

此脚本使表格的标题元素垂直固定，但在其主体元素旁边水平滚动。

Answer 1

好的，所以我发现这是Firefox中的一个错误，当相对位置时，TH的背景会覆盖边框。应该搜索，对不起mods。

通过在.header-cell类上使用透明的rgba（）背景属性来确认

请参阅此堆栈问题了解更多信息：

Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

这个由用户Boris Zbarsky提交的错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=688556

可悲的是，它在6年后仍然被打破了！

目前，将背景颜色属性赋予THEAD父元素似乎是一个很好的解决方法

Answer 2

对于Firefox，您可以使用gradient和background-size作为解决方法：

  background-color:#f8f8f8;/* older browser */
  background:linear-gradient(#f8f8f8,#f8f8f8 )no-repeat center / 100% 100% ;/* firefox understands this */

＆＃13;

$(function() {
  $(".table-body").scroll(function() {
    $(".table-header")[0].style.top = (this.scrollTop) + 'px';
  });
});

＆＃13;

body {
  font-family: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

th,
tr,
td,
thead,
tbody {
  text-align: left;
  margin: 0 !important;
}

th,
td {
  padding: 16px 24px 16px 24px;
}

th a {
  position: relative;
  width: 24px;
  cursor: pointer;
  float: right;
  text-align: right;
}

svg * {
  transition: fill .2s ease;
}

.filters-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: red;
  height: 100px;
  width: 40px;
}

th a:hover>svg * {
  fill: #333333;
}

thead tr {
  height: 36px;
}

#bodytable tbody {
  display: block;
}

.table-header {
  position: relative;
  display: block;
}

.table-body {
  border: 1px solid #ccc;
  overflow: auto;
  height: 400px;
}

.header-cell {
  background-color:#f8f8f8;/* older browser */
  background:linear-gradient(#f8f8f8,#f8f8f8 )no-repeat center / 100% 100% ;/* firefox understands this */
  position: relative;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  min-width: 330px;
}

.body-cell {
  min-width: 330px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-body">
  <table id="bodytable">
    <thead class="table-header">
      <tr>
        <th class="header-cell col1">One
          <a>
            <svg x="0px" y="0px" width="4px" height="20px" viewBox="0 0 4 20" enable-background="new 0 0 4 20" xml:space="preserve">
								<circle fill="#666666" cx="2" cy="2" r="2"/>
								<circle fill="#666666" cx="2" cy="10" r="2"/>
								<circle fill="#666666" cx="2" cy="18" r="2"/>
							</svg>
          </a>
          <div class="filters-menu"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="body-cell col1">body row1</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

当Absolute <div>嵌套在其中时，相对失去边框

2 个答案: