Question

我有一张又高又宽的桌子，希望始终能看到第一行和第一列。 position: sticky进行救援！

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sticky test</title>
    <style>
      th { padding: 20px 100px; background: #eeeeee; }
      td { padding: 50px 200px; background: #fafafa; }
      thead th:first-child { position: sticky; top: 0; left: 0; z-index: 3; }
      thead th:not(:first-child) { position: sticky; top: 0; z-index: 2; }
      tbody th { position: sticky; left: 0; z-index: 1; }
    </style>
  </head>
  <body>
    <h1>Sticky test</h1>
    <table>
      <thead>
        <tr><th>Foo</th><th>Bar</th><th>Foo</th><th>Bar</th></tr>
      </thead>
      <tbody>
        <tr><th>a</th><td>1</td><td>2</td><td>3</td></tr>
        <tr><th>b</th><td>4</td><td>5</td><td>6</td></tr>
        <tr><th>c</th><td>7</td><td>8</td><td>9</td></tr>
        <tr><th>d</th><td>10</td><td>11</td><td>12</td></tr>
        <tr><th>e</th><td>13</td><td>14</td><td>15</td></tr>
        <tr><th>f</th><td>16</td><td>17</td><td>18</td></tr>
        <tr><th>g</th><td>19</td><td>20</td><td>21</td></tr>
        <tr><th>h</th><td>22</td><td>23</td><td>24</td></tr>
        <tr><th>i</th><td>25</td><td>26</td><td>27</td></tr>
        <tr><th>j</th><td>28</td><td>29</td><td>30</td></tr>
      </tbody>
    </table>
    <p>That's all, folks!</p>
  </body>
</html>

这很好。但是现在整个页面都是水平滚动的，我宁愿表格只能滚动。

我的尝试

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sticky test</title>
    <style>
      th { padding: 20px 100px; background: #eeeeee; }
      td { padding: 50px 200px; background: #fafafa; }
      thead th:first-child { position: sticky; top: 0; left: 0; z-index: 3; }
      thead th:not(:first-child) { position: sticky; top: 0; z-index: 2; }
      tbody th { position: sticky; left: 0; z-index: 1; }
      .scrollable { max-width: 100%; overflow-x: scroll; }
    </style>
  </head>
  <body>
    <h1>Sticky test</h1>
    <div class="scrollable">
      <table>
        <thead>
          <tr><th>Foo</th><th>Bar</th><th>Foo</th><th>Bar</th></tr>
        </thead>
        <tbody>
          <tr><th>a</th><td>1</td><td>2</td><td>3</td></tr>
          <tr><th>b</th><td>4</td><td>5</td><td>6</td></tr>
          <tr><th>c</th><td>7</td><td>8</td><td>9</td></tr>
          <tr><th>d</th><td>10</td><td>11</td><td>12</td></tr>
          <tr><th>e</th><td>13</td><td>14</td><td>15</td></tr>
          <tr><th>f</th><td>16</td><td>17</td><td>18</td></tr>
          <tr><th>g</th><td>19</td><td>20</td><td>21</td></tr>
          <tr><th>h</th><td>22</td><td>23</td><td>24</td></tr>
          <tr><th>i</th><td>25</td><td>26</td><td>27</td></tr>
          <tr><th>j</th><td>28</td><td>29</td><td>30</td></tr>
        </tbody>
      </table>
    </div>
    <p>That's all, folks!</p>
  </body>
</html>

实际上，表格现在可以水平滚动。但是，第一行的粘性现在已被打破。（左列仍然是适当的粘性。）

我该如何解决？

Answer 1

请参阅issue posted at W3C

似乎如果不同时设置max-height和

，就无法立即使它工作。

overflow-y: scroll;

如果可以的话，到表中。

如果没有，请尝试以下操作，看看是否对您有用：

<div class="">
  <table style="position: sticky; top: 0;">
    <thead>
      <tr><th>Foo</th><th>Bar</th><th>Foo</th><th>Bar</th></tr>
    </thead>
    </table>

    <table>
    <tbody>
      <tr><th>a</th><td>1</td><td>2</td><td>3</td></tr>
      <tr><th>b</th><td>4</td><td>5</td><td>6</td></tr>
...

这是两个表，其中一个表是粘性的（标题部分），直到到达包装div的末尾为止。然后，您可以使两个控件都可滚动，隐藏标题滚动条，并使用三行jQuery将滚动链接链接到底部滚动条。

检查fiddle。

Answer 2

这些天看起来事情变得更简单了（或者总是如此？）：

.wrapper {
  max-width: 100%;
  max-height: 50vh;
  overflow-y: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

th { padding: 20px 50px; background: #eee; }
td { padding: 20px 50px; background: #fafafa; }

<div class="wrapper">
  <table>
    <thead><tr>
        <th>Foo</th>
        <th>Bar</th>
        <th>Foo</th>
        <th>Bar</th>
      </tr></thead>
    <tbody>
      <tr><th>a</th><td>1</td><td>2</td><td>3</td></tr>
      <tr><th>b</th><td>4</td><td>5</td><td>6</td></tr>
      <tr><th>c</th><td>7</td><td>8</td><td>9</td></tr>
      <tr><th>d</th><td>10</td><td>11</td><td>12</td></tr>
      <tr><th>e</th><td>13</td><td>14</td><td>15</td></tr>
      <tr><th>f</th><td>16</td><td>17</td><td>18</td></tr>
      <tr><th>g</th><td>19</td><td>20</td><td>21</td></tr>
      <tr><th>h</th><td>22</td><td>23</td><td>24</td></tr>
      <tr><th>i</th><td>25</td><td>26</td><td>27</td></tr>
      <tr><th>j</th><td>28</td><td>29</td><td>30</td></tr>
    </tbody>
  </table>
</div>

<div style="height: 100vh">
  More scrolling space
</div>

如何制作带有粘性标题的可滚动表

2 个答案: