css элементы с абсолютным позиционированием перекрывают родительский элемент переполнения - PullRequest
Новая
       18

css элементы с абсолютным позиционированием перекрывают родительский элемент переполнения

0 голосов
/ 18 апреля 2020

У меня есть огромная таблица, которую нужно прокручивать по горизонтали, и список абсолютных позиций внутри <td>, если список слишком длинный, он будет скрыт таблицей. Так как я могу использовать overflow-x и одновременно видеть список.

Я думаю, что фрагмент объясняет это ясно. 

table {
  border: 1px solid rgb(0, 0, 0);
}
td {
  border-top: 1px solid rgb(0, 0, 0);
}
ul {
  margin: 0;
  padding: 0 10px;
  list-style-type: none;
}
.table-wrapper {
  width: 100px;
  overflow-y: visible;
  overflow-x: scroll;
}
.table2-wrapper {
  width: 100px;
/*   overflow-x: scroll; */
}
.parent {
  position: relative;
}
.child {
  top: 100%;
  position: absolute;
  border: 1px solid #1e90ff;
  background-color: #e9e9e9;
}
<div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Letters</th>
          <th>Drinks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="parent">A
            <div class="child">
              <ul>
                <li>Aa</li>
                <li>Ab</li>
                <li>Ac</li>
              </ul>
            </div>
          </td>
          <td>Coffee</td>
        </tr>
        <tr>
          <td>B</td>
          <td>Tea</td>
        </tr>
      </tbody>
    </table>
</div>

<div>
I only need the horizontal scroll bar, and I want the list to be visible!
</div>

<div class="table2-wrapper">
    <table>
      <thead>
        <tr>
          <th>Letters</th>
          <th>Drinks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="parent">A
            <div class="child">
              <ul>
                <li>Aa</li>
                <li>Ab</li>
                <li>Ac</li>
              </ul>
            </div>
          </td>
          <td>Coffee</td>
        </tr>
        <tr>
          <td>B</td>
          <td>Tea</td>
        </tr>
      </tbody>
    </table>
</div>

Эта статья фактически решает проблему, но список больше не будет следовать таблице при прокрутке. https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/

1 Ответ

0 голосов
/ 18 апреля 2020

Это то, что вы ищете?

Все, что вам нужно сделать, это дать вашему столу min-height. поэтому я просто установил его на min-height: 200px;

table {
  border: 1px solid rgb(0, 0, 0);
}
td {
  border-top: 1px solid rgb(0, 0, 0);
}
ul {
  margin: 0;
  padding: 0 10px;
  list-style-type: none;
}
.table-wrapper {
  width: 100px;
  height: auto;
  min-height: 200px; /* Add This */
  overflow-y: auto;
  overflow-x: scroll;
}
.parent {
  position: relative;
}
.child {
  top: 100%;
  position: absolute;
  border: 1px solid #1e90ff;
  background-color: #e9e9e9;
}
<div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Letters</th>
          <th>Drinks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="parent">A
            <div class="child">
              <ul>
                <li>Aa</li>
                <li>Ab</li>
                <li>Ac</li>
              </ul>
            </div>
          </td>
          <td>Coffee</td>
        </tr>
        <tr>
          <td>B</td>
          <td>Tea</td>
        </tr>
      </tbody>
    </table>
</div>
...