Question

我正在尝试在表上创建列锁定效果。但是，当我锁定列时，它们会从父div流出（出现在其顶部）。

我尝试设置列数据的zIndex和父div，这会使div出现在列顶部。 但是，列中大于视口的部分仍显示在div之外。

我几乎可以肯定这是position:absolute;的问题，以及它如何从文档流中删除元素，但是我还不太清楚不使用position:absolute的方法。我想了解是什么导致重叠问题，以及如何使用普通的旧html / css / js修复它。

顺便说一句，我不是在寻找用于创建锁定表列的jQuery插件解决方案。

<style>
  table {
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-collapse: collapse;
  }

  .data-table td {
    border-top: 1px solid;
    background-color: gray;
    width: 74px;
    border-right: 1px solid;
  }

  .data-table {
    border-bottom: 1px solid;
    table-layout: fixed;
  }

  .col-header {
    width: 74px;
  }

  .container {
    width: 500px;
    height: 100px;
    overflow: scroll;
  }
</style>
<body>
  <div class="container">
    <table class="data-table" id="column-data-table">
      <thead>
        <tr>
          <td data-column-index="0">
            <div class="col-header"> Column 1 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="1">
            <div class="col-header"> Column 2 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="2">
            <div class="col-header"> Column 3 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="3">
            <div class="col-header"> Column 4 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="4">
            <div class="col-header"> Column 5 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="5">
            <div class="col-header"> Column 6 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="6">
            <div class="col-header"> Column 7 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="7">
            <div class="col-header"> Column 8 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="8">
            <div class="col-header"> Column 9 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="9">
            <div class="col-header"> Column 10 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="10">
            <div class="col-header"> Column 11 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="11">
            <div class="col-header"> Column 12 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="12">
            <div class="col-header"> Column 13 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    function lockColumns(e) {
      let columnDataTable = window.document.getElementById("column-data-table");
      let columnDataRows = columnDataTable.rows;
      let colWidths = new Array(columnDataRows[0].children[0].length);

      for (var j = 0; j < columnDataRows.length; j++) {
        let currentCell = e.target.parentNode;
        let currentColInd = currentCell.dataset.columnIndex;

        for (let i = 0; i <= currentColInd; i++) {
          columnDataRows[j].children[i].style.position = "absolute";
          if (i > 0) {
            let prevColPosition = (i - 1);
            if (!colWidths[i]) {
              let prevColBoundingRect = columnDataRows[j].children[prevColPosition].getBoundingClientRect();
              colWidths[i] = prevColBoundingRect.x + prevColBoundingRect.width;
            }
            let prevColPos = colWidths[i];

            columnDataRows[j].children[i].style.left = prevColPos + "px";
          }
        }
      }
    }
  </script>
</body>

Here is a fiddle

使用position：absolute时，表格重叠div

0 个答案: