等效于IE 11的多个表中标头的位置粘贴

时间：2018-11-29 13:32:26

标签： html css internet-explorer html-table position

实际上我对物料表有问题，但我认为其他表也有问题。

不知道为什么，但是位置固定无法正常工作，所以我没有添加它，但是在我的解决方案中，它在Chrome浏览器中可以完美运行。

所以，我需要什么：

  1. 我有几张桌子（2-4），每次都应该有Vertical-x滚动可见。它不应该超出屏幕；
  2. 滚动y轴时，所有标头应固定在顶部；
  3. 我在表格上方有一些数据，因此应该有一些视口；
  4. 这当然应该在IE中起作用，因为在Chrome中它的位置是固定的，就像我提到的那样。

请帮忙。我不能将多个桌子做成一张桌子，并且已经为此苦苦挣扎了几天。

这是我的小提琴：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>

我看到了这个答案Fixed header table with horizontal scrollbar and vertical scrollbar on，但不知道如何针对多个表格滚动实现。如果需要某些脚本，最好让VanillaJS回答。

0 个答案:

没有答案
相关问题
最新问题