Question

根据我的理解，绝对定位的元素只受其最近的祖先的影响，该祖先的位置相对或固定。

当我搞乱滚动表时，似乎有一种奇怪的情况，表头中的div元素会占用它的父th元素的帐户，而这个元素并不是相对定位的。为什么会这样？

的CSS：

/* table borders */

.scrollArea table tr th:first-child .th-inner {
  border-left: none;
}
.scrollArea table tbody tr td {
  border: 1px solid #CCC;
  border-right: 0px;
  border-bottom: 0px;
}

/* scrollable table */

.scrollableContainer {
  height: 283px;
  position: relative;
  padding-top: 22px;
  width: 756px;
}

.scrollableContainer .headerSpacer {
  border: 1px solid #d5d5d5;
  border-bottom-color: #bbb;
  position: absolute;
  height: 21px;
  top: 0;
  right: 0;
  left: 0;
}

.scrollArea {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d5d5d5;
}

.scrollArea table {
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 0;
  border: none;
  border-collapse: separate;
}

.scrollArea table th {
  padding: 0;
  border: none;
}

/* using absolute positions means the original table header has no content, hence is collapsed */

.scrollArea table .th-inner {
  position: absolute;
  top: 0;
  height: 21px;
  border-left: 1px solid #ddd;
}

HTML：

<div class="scrollableContainer">
  <div class="headerSpacer"></div>
  <div class="scrollArea">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <thead class="fixedHeader">
        <tr>
          <th>
            <div class="th-inner">Header 1</div>
          </th>
          <th>
            <div class="th-inner">Header 2</div>
          </th>
          <th>
            <div class="th-inner">Header 3</div>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr>
          <td>aaaaaaaaaaaaaaaa</td>
          <td>bbbbbbbbbbbbbbbb</td>
          <td>cccccccccccccccccccccccccccccccc</td>
          ...

Answer 1

这是一个已知问题。 Here解释了一个可能对您有用的解决方案。

以下是一个如何适用于您的案例的简短示例：

...
<th>
    <div style="position:relative; overflow: auto; height: 100%;">
        <div class="th-inner">Header 1</div>
    </div>
</th>
...

放置绝对定位的元素

1 个答案: