具有溢出自动的表隐藏具有绝对位置的内容

Question

小提琴解释了问题。我有一个可滚动的表格和其中的上下文菜单，但是使用溢出-x：自动，这个“上下文菜单”不再可见。

table {
  overflow: auto;
  width: 100%;
  display: block;
}

.absoluteElement {
  position: absolute;
}

<h2>ABSOLUTE Position Problem</h2>
<table>
  <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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="position: absolute">
        <div class="absoluteElement">
          Content will scroll with the bar
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/ohwy3z6L/16/

如何在表格上滚动并保持上下文菜单出现？

Answer 1

我不确定我是否正确理解了您的问题，但这是我设法做的，如果有问题，我会尝试解决。

tr {
  overflow: auto;
  width: 100%;
}

.relativeElement {
  position: relative;
  /* Imagine a dropdown/context menu on the grid here */
  top: 10px;
  left: 15px;
}

.absoluteElement {
  position: absolute;
  /* Imagine a dropdowncontext menu on the grid here */
  top: 10px;
  left: 15px;
}

<h2>RELATIVE Position Problem</h2>
<table>
  <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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="relativeElement">
          Content will cut here
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

<h2>ABSOLUTE Position Problem</h2>
<table>
  <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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="position: relative">
        <div class="absoluteElement">
          Content will scroll with the bar
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>