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

У меня есть страница с таблицей 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>
0
09 мая '19 в 0:20
источник поделиться
1 ответ

По-видимому, в Chrome стиль " position: sticky " не работает, если он присоединен к тегу tr, но работает, если он присоединен к th или td. В Firefox стиль работает, когда присоединен к tr.

0
09 мая '19 в 13:40
источник

Посмотрите другие вопросы по меткам или Задайте вопрос