代码之家 › 专栏 › 技术社区 › mscha

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

sticky css html

mscha · 技术社区 · 6 年前

我有一张又宽又高的桌子,我希望上面的行和列总是可见的。 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>

实际上,表现在可以水平滚动了。但是顶行的粘性现在被打破了。(左列仍有适当的粘性。)

我怎么修这个?

1 回复 | 直到 6 年前

user127091 6 年前

请看 issue posted at W3C

如果不设置最大高度和

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>
...

这是两个表,其中一个表在到达包装分区的末尾之前是粘性的(标题部分)。然后,如果使用jquery,您可以使它们都具有x-可滚动性,隐藏标题滚动条,并将滚动链接到底部滚动条。

检查 fiddle .