html - 溢出自动隐藏位置绝对的内容的表

Question

fiddle 解释了这个问题。我有一个可滚动的表格和一个上下文菜单，但是有了 overflow-x: auto，这个“上下文菜单”就不再可见了。

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>