Совместимость с Firefox / Chrome: HTML-таблица с фиксированным заголовком и столбцом - PullRequest
Новая
       3

Совместимость с Firefox / Chrome: HTML-таблица с фиксированным заголовком и столбцом

0 голосов
/ 09 мая 2019

У меня есть страница с таблицей HTML и немного CSS.Когда я отображаю страницу в Firefox (64-битная версия 66.0.5), она в основном работает, заголовки придерживаются вершины, как они должны, а первый столбец - слева.Но когда я уменьшил ширину окна браузера, чтобы страница имела горизонтальную полосу прокрутки, я не могу понять, как сделать так, чтобы тег tr с colspan не прокручивался влево при горизонтальной прокрутке.

Когда я запускаю тот же код в Firefox, используя JSFiddle , он не работает так же хорошо, как из моих собственных файлов HTML и CSS.Единственный заголовок, который придерживается вершины, является главным с заголовками столбцов, другие заголовки не придерживаются вершины.Однако первый столбец действительно придерживается влево.Вот страница на JSFiddle:

https://jsfiddle.net/samlalani/nswoz9rp/8/

Та же проблема возникает в Safari в MacOS.

В Chrome (v74.0.3729.131 64-bit), первый столбец придерживается влево при горизонтальной прокрутке, но вертикальная прокрутка не удерживает любых верхних колонтитулов.

Я былпоиск по всему интернету (включая stackoverflow ), пытаясь выяснить, как заставить эту страницу работать как на Firefox , так и Chrome без удачи.И нет примеров того, как заставить tr с colspan не прокручиваться с левой стороны экрана при горизонтальной прокрутке.Любая помощь будет принята с благодарностью.

Вот код, который я использую: 

.scrollingtable {
  position: absolute;
  width: 80%;
  height: 80%;
  z-index: 2;
  margin: auto;
  top: 20;
}

.mytable {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 1000px;
  min-width: 850px;
  left: 0;
}

.nameheader {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  z-index: 2;
  background: #000;
  color: #FFF;
}

.name {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  z-index: 2;
  background: #FFF;
  color: #000;
}

.date {
  width: 65;
}

.city {
  width: 80px;
}

.state {
  width: 30px;
}

.mytable td {
  border: 1px solid #000;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 1;
}

.mytitle {
  position: -webkit-sticky;
  position: sticky;
  height: 50;
  top: 0;
  left: 0;
  color: white;
  background-color: black;
  z-index: 5;
}

.subtitle {
  position: -webkit-sticky;
  position: sticky;
  height: 20;
  top: 50;
  left: 0;
  color: white;
  background-color: #555;
  z-index: 4;
}

.subtitle2 {
  position: -webkit-sticky;
  position: sticky;
  height: 20;
  top: 70;
  left: 0;
  color: black;
  background-color: #AAA;
  z-index: 3;
}
<html>

<head>
  <title>Table Test</title>
  <link rel="stylesheet" href="th.css">
</head>

<body>
  <div class="scrollingtable">
    <table class="mytable">
      <tbody>
        <tr class="mytitle">
          <th class="nameheader">Name</th>
          <th class="date">Date</th>
          <th class="city">City</th>
          <th class="state">State</th>
          <th class="date">Date</th>
          <th class="city">City</th>
          <th class="state">State</th>
          <th class="date">Date</th>
          <th class="city">City</th>
          <th class="state">State</th>
          <th class="date">Date</th>
          <th class="city">City</th>
          <th class="state">State</th>
          <th class="date">Date</th>
          <th class="city">City</th>
          <th class="state">State</th>
        </tr>
        <tr class="subtitle">
          <td colspan="16">Managers</td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr class="subtitle">
          <td colspan="16">Developers</td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr class="subtitle2">
          <td colspan="16">SubStaff</td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr class="subtitle">
          <td colspan="16">Staff 2</td>
        </tr>
        <tr class="subtitle2">
          <td colspan="16"></td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr class="subtitle">
          <td colspan="16">Staff 3</td>
        </tr>
        <tr class="subtitle2">
          <td colspan="16">SubStaff 3</td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr class="subtitle">
          <td colspan="16">Staff 4</td>
        </tr>
        <tr>
          <td class="name">John Doe</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Jill Smith</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bob Whitaker</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
        <tr>
          <td class="name">Bill Allec</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
          <td class="date">1/2/2015</td>
          <td class="city">Las Vegas</td>
          <td class="state">NV</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 09 мая 2019

Очевидно, что в Chrome стиль " position: sticky " не работает, если он прикреплен к тегу tr , но работает, если он прикреплен к * 1005. * th или td . В Firefox стиль работает при подключении к tr .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...