IE 11 эквивалентен для позиции, прикрепленной к заголовкам в нескольких таблицах - PullRequest
Новая
       12

IE 11 эквивалентен для позиции, прикрепленной к заголовкам в нескольких таблицах

0 голосов
/ 29 ноября 2018

У меня проблема с таблицами материалов, но я думаю, что это проблема и с другими таблицами.

Не знаю почему, но позиция sticky не работает в скрипте, поэтому я не включилэто, но на моем решении он отлично работает в браузере Chrome.

Итак, что мне нужно:

  1. У меня есть пара таблиц (2-4), которые должны иметь вертикальный хсвиток виден каждый раз.Он не должен выходить за пределы экрана;
  2. Все заголовки должны быть зафиксированы наверху при прокрутке по оси Y;
  3. У меня есть некоторые данные над таблицами, поэтому некоторое окно просмотра должно быть на месте;
  4. Конечно, это должно работать в IE, потому что в Chrome он работает с position: sticky, как я уже говорил.

Пожалуйста, помогите.Я не могу сделать одну таблицу из нескольких и борюсь с ней уже пару дней.

Вот моя скрипка: https://jsfiddle.net/genyklemberg/n5s8h3mj/7/

CSS: 

.container {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 200px;
  width: 80%;
}
.wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
}
thead {
    background-color: #EFEFEF;    
}
thead tr {
  position: sticky;
}
thead, tbody {
    display: block;
}
td, th {
    min-width: 50px;
    height: 25px;
    border: dashed 1px lightblue;
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

Html: 

<div>
  <h2>Another div here</h2>
</div>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
          <th>Four</th>
          <th>Five</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>AAAAAA</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
          <th>Four</th>
          <th>Five</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
          <th>Four</th>
          <th>Five</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Я видел этот ответ Исправлена ​​таблица заголовков с горизонтальной полосой прокрутки и вертикальной полосой прокрутки на , но не мог понять, как это можно реализовать для прокрутки нескольких таблиц.Лучше также иметь ответ VanillaJS, если нужен какой-то скрипт.

...