Bootstrap Sticky столбец в таблице z-index

У меня есть приведенный ниже код, где первый столбец имеет назначенную ему позицию «липкой». Проблема, с которой я сталкиваюсь, заключается в том, что раскрывающийся список Bootstrap 4 при открытии появляется в нижнем столбце.

Пример ниже:

Код CSS, где позиция: липкая; применяется к первому столбцу.

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<div class = "container-fluid">
  <div class = "table-container">
    <table class = "table table-striped table-bordered">
      <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 = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
          <td>Row 1, Column 5</td>
          <td>Row 1, Column 6</td>
          <td>Row 1, Column 7</td>
          <td>Row 1, Column 8</td>
          <td>Row 1, Column 9</td>
          <td>Row 1, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 2, Column 2</td>
          <td>Row 2 Column 3</td>
          <td>Row 2, Column 4</td>
          <td>Row 2, Column 5</td>
          <td>Row 2, Column 6</td>
          <td>Row 2, Column 7</td>
          <td>Row 2, Column 8</td>
          <td>Row 2, Column 9</td>
          <td>Row 2, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 3, Column 2</td>
          <td>Row 3, Column 3</td>
          <td>Row 3, Column 4</td>
          <td>Row 3, Column 5</td>
          <td>Row 3, Column 6</td>
          <td>Row 3, Column 7</td>
          <td>Row 3, Column 8</td>
          <td>Row 3, Column 9</td>
          <td>Row 3, Column 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin = "anonymous"></script>

Я попытался добавить более высокий z-индекс в раскрывающийся список, но, похоже, он игнорируется.

BS4 немного устарел, вы можете проверить Bootstrap 5

— 22.04.2023 13:39

html css bootstrap-4 z-index sticky

22.04.2023 11:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что каждый из липких элементов является своим собственным контекстом стека, и любой z-index, примененный к выпадающим элементам, будет относиться к элементам в том же контексте стека td:first-child или th:first-child.

Чтобы обойти это, нам нужно повысить элемент td:first-child или th:first-child до более высокого z-index, когда его раскрывающийся список открыт. Мы могли бы использовать :has(), например:

:first-child:is(th, td):has(.dropdown.show) {
  z-index: 2;
}

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}


:first-child:is(th, td):has(.dropdown.show) {
  z-index: 2;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<div class = "container-fluid">
  <div class = "table-container">
    <table class = "table table-striped table-bordered">
      <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 = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
          <td>Row 1, Column 5</td>
          <td>Row 1, Column 6</td>
          <td>Row 1, Column 7</td>
          <td>Row 1, Column 8</td>
          <td>Row 1, Column 9</td>
          <td>Row 1, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 2, Column 2</td>
          <td>Row 2 Column 3</td>
          <td>Row 2, Column 4</td>
          <td>Row 2, Column 5</td>
          <td>Row 2, Column 6</td>
          <td>Row 2, Column 7</td>
          <td>Row 2, Column 8</td>
          <td>Row 2, Column 9</td>
          <td>Row 2, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 3, Column 2</td>
          <td>Row 3, Column 3</td>
          <td>Row 3, Column 4</td>
          <td>Row 3, Column 5</td>
          <td>Row 3, Column 6</td>
          <td>Row 3, Column 7</td>
          <td>Row 3, Column 8</td>
          <td>Row 3, Column 9</td>
          <td>Row 3, Column 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin = "anonymous"></script>

Но :has()еще не совместим со всеми основными браузерами, поэтому нам нужно реализовать это немного по-другому с помощью JavaScript, где мы обнаруживаем открытый раскрывающийся список и соответствующим образом повышаем z-index, например:

const observer = new MutationObserver(
  (entries) =>
    entries.forEach(({ target }) => {
      target.closest(':first-child:is(th, td)').style.zIndex =
        target.classList.contains('show') ? '2' : '';
    }),
);

document
  .querySelectorAll('.dropdown')
  .forEach((dropdown) => {
    const thTdFirst = dropdown.closest(':first-child:is(th, td)');
    if (thTdFirst) {
      observer.observe(dropdown, { attributeFilter: ['class'] });
    }
  });

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<div class = "container-fluid">
  <div class = "table-container">
    <table class = "table table-striped table-bordered">
      <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 = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
          <td>Row 1, Column 5</td>
          <td>Row 1, Column 6</td>
          <td>Row 1, Column 7</td>
          <td>Row 1, Column 8</td>
          <td>Row 1, Column 9</td>
          <td>Row 1, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 2, Column 2</td>
          <td>Row 2 Column 3</td>
          <td>Row 2, Column 4</td>
          <td>Row 2, Column 5</td>
          <td>Row 2, Column 6</td>
          <td>Row 2, Column 7</td>
          <td>Row 2, Column 8</td>
          <td>Row 2, Column 9</td>
          <td>Row 2, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class = "dropdown">
              <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
              <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                <a class = "dropdown-item" href = "#">Action</a>
                <a class = "dropdown-item" href = "#">Another action</a>
                <a class = "dropdown-item" href = "#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 3, Column 2</td>
          <td>Row 3, Column 3</td>
          <td>Row 3, Column 4</td>
          <td>Row 3, Column 5</td>
          <td>Row 3, Column 6</td>
          <td>Row 3, Column 7</td>
          <td>Row 3, Column 8</td>
          <td>Row 3, Column 9</td>
          <td>Row 3, Column 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin = "anonymous"></script>

22.04.2023 12:31

Другие вопросы по теме

Почему css position:fixed не работает для тега диалога?

<use/> a <symbol/> с <style/> для применения правил CSS на основе классов, применяемых к родительскому HTML

Не удается правильно отобразить мое приложение с помощью сетки CSS

Как я могу использовать CSS nth-child(odd) nth-child(even) для выравнивания столбцов в сетке CSS?

Можно ли иметь переменную в имени класса CSS?

У меня есть 2 типа ссылок <a>, но только один из них работает при :HOVER. Почему?

Почему селектор соседних элементов не работает должным образом

Как выровнять и центрировать два div по горизонтали, а также сделать их отзывчивыми?

Пропустить первые несколько элементов в ul

Есть некоторая синтаксическая ошибка, которую показывает мой код vs, который использует файл hintrc для их удаления

Bootstrap Sticky столбец в таблице z-index

Ответы 1

Другие вопросы по теме

Похожие вопросы