无法将表格标题置于固定(粘性)位置

问题描述 投票:0回答:2

我有一个包含很多行的 HTML 表格,我试图使表格标题在滚动时具有粘性。

但是我无法让标头粘住或保持在固定位置。

HTML

<section>
    <table>
        <thead>
            <tr>
                <th>A
                <th>
                <th>B
                <th>
                <th>C
                <th>
                <th>D
                <th>
                <th>E
                <th>
                <th>F
                <th>
                <th>G
                <th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>
</section>

CSS

    section {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    table {
        width: 250%;
    }

    th {
        text-align: left;
        position: sticky;
    }

    thead {
        position: sticky;
    }
css html-table sticky
2个回答
4
投票

发生这种情况的原因有很多:

  • 位置粘性不适用于

    <thead>
    <tr>
    仅适用于
    <th>

  • 如果元素的任何父元素上的溢出设置为隐藏、滚动或自动,则位置粘性很可能不起作用。

  • 如果任何父元素设置了高度,位置粘性可能无法正常工作。

  • 如果表格
  • display

    设置为

    block
    table
     等属性之外的其他内容,

    位置粘性将不起作用
  • 许多浏览器仍然不支持粘性定位。查看哪些浏览器支持position:sticky。


检查祖先元素是否设置了溢出(例如溢出:隐藏);尝试切换它。您可能必须在 DOM 树上爬得比您预期的更高。

这可能会影响你的位置:粘在后代元素上。


简单的例子 添加类和布局应该不难。

body {
  margin: 0;
  padding: 2rem;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
  th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
tr.purple th {
  background: purple;
  color: white;
}
th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table>
    <thead>
    <tr class="red">
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
        <th>Color</th>
        <th>URL</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Lorem.</td>
        <td>Ullam.</td>
        <td>Vel.</td>
        <td>At.</td>
        <td>Quis.</td>
    </tr>
    <tr>
        <td>Quas!</td>
        <td>Velit.</td>
        <td>Quisquam?</td>
        <td>Rerum?</td>
        <td>Iusto?</td>
    </tr>
    <tr>
        <td>Voluptates!</td>
        <td>Fugiat?</td>
        <td>Alias.</td>
        <td>Doloribus.</td>
        <td>Veritatis.</td>
    </tr>
    <tr>
        <td>Maiores.</td>
        <td>Ab.</td>
        <td>Accusantium.</td>
        <td>Ullam!</td>
        <td>Eveniet.</td>
    </tr>
    <tr>
        <td>Hic.</td>
        <td>Id!</td>
        <td>Officiis.</td>
        <td>Modi!</td>
        <td>Obcaecati.</td>
    </tr>
    <tr>
        <td>Soluta.</td>
        <td>Ad!</td>
        <td>Impedit.</td>
        <td>Alias!</td>
        <td>Ad.</td>
    </tr>
    <tr>
        <td>Expedita.</td>
        <td>Quo.</td>
        <td>Exercitationem!</td>
        <td>Optio?</td>
        <td>Ipsum?</td>
    </tr>
    <tr>
        <td>Commodi!</td>
        <td>Rem.</td>
        <td>Aspernatur.</td>
        <td>Accusantium!</td>
        <td>Maiores.</td>
    </tr>
    <tr>
        <td>Omnis.</td>
        <td>Cumque?</td>
        <td>Eveniet!</td>
        <td>Mollitia?</td>
        <td>Vero.</td>
    </tr>
    <tr>
        <td>Error!</td>
        <td>Inventore.</td>
        <td>Quasi!</td>
        <td>Ducimus.</td>
        <td>Repudiandae!</td>
    </tr>
    <tr>
        <td>Dolores!</td>
        <td>Necessitatibus.</td>
        <td>Corrupti!</td>
        <td>Eum.</td>
        <td>Sunt!</td>
    </tr>
    <tr>
        <td>Ea.</td>
        <td>Culpa?</td>
        <td>Quam?</td>
        <td>Nemo!</td>
        <td>Sit!</td>
    </tr>
    <tr>
        <td>Veritatis!</td>
        <td>Facilis.</td>
        <td>Expedita?</td>
        <td>Ipsam!</td>
        <td>Omnis!</td>
    </tr>
    <tr>
        <td>Vitae.</td>
        <td>Cumque.</td>
        <td>Repudiandae.</td>
        <td>Ut?</td>
        <td>Sed!</td>
    </tr>
    <tr>
        <td>Accusantium.</td>
        <td>Adipisci.</td>
        <td>Sit.</td>
        <td>Maxime.</td>
        <td>Harum.</td>
    </tr>
    <tr class="green">
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
        <th>Color</th>
        <th>URL</th>
    </tr>
    <tr>
        <td>Qui!</td>
        <td>Accusamus?</td>
        <td>Minima?</td>
        <td>Dolorum.</td>
        <td>Molestiae.</td>
    </tr>
    <tr>
        <td>Vero!</td>
        <td>Voluptatum?</td>
        <td>Ea?</td>
        <td>Odit!</td>
        <td>A.</td>
    </tr>
    <tr>
        <td>Debitis.</td>
        <td>Veniam.</td>
        <td>Fuga.</td>
        <td>Alias!</td>
        <td>Recusandae!</td>
    </tr>
    <tr>
        <td>Aperiam!</td>
        <td>Dolorum.</td>
        <td>Enim.</td>
        <td>Sapiente!</td>
        <td>Suscipit?</td>
    </tr>
    <tr>
        <td>Consequuntur.</td>
        <td>Doloremque.</td>
        <td>Illum!</td>
        <td>Iste!</td>
        <td>Sint!</td>
    </tr>
    <tr>
        <td>Facilis.</td>
        <td>Error.</td>
        <td>Fugiat.</td>
        <td>At.</td>
        <td>Modi?</td>
    </tr>
    <tr>
        <td>Voluptatibus!</td>
        <td>Alias.</td>
        <td>Eaque.</td>
        <td>Cum.</td>
        <td>Ducimus!</td>
    </tr>
    <tr>
        <td>Nihil.</td>
        <td>Enim.</td>
        <td>Earum?</td>
        <td>Nobis?</td>
        <td>Eveniet.</td>
    </tr>
    <tr>
        <td>Eum!</td>
        <td>Id?</td>
        <td>Molestiae.</td>
        <td>Velit.</td>
        <td>Minima.</td>
    </tr>
    <tr>
        <td>Sapiente?</td>
        <td>Neque.</td>
        <td>Obcaecati!</td>
        <td>Earum.</td>
        <td>Esse.</td>
    </tr>
    <tr>
        <td>Nam?</td>
        <td>Ipsam!</td>
        <td>Provident.</td>
        <td>Ullam.</td>
        <td>Quae?</td>
    </tr>
    <tr>
        <td>Amet!</td>
        <td>In.</td>
        <td>Officia!</td>
        <td>Natus?</td>
        <td>Tempore?</td>
    </tr>
    <tr>
        <td>Consequatur.</td>
        <td>Hic.</td>
        <td>Officia.</td>
        <td>Itaque?</td>
        <td>Quasi.</td>
    </tr>
    <tr>
        <td>Enim.</td>
        <td>Tenetur.</td>
        <td>Asperiores?</td>
        <td>Eos!</td>
        <td>Libero.</td>
    </tr>
    <tr>
        <td>Exercitationem.</td>
        <td>Quidem!</td>
        <td>Beatae?</td>
        <td>Adipisci?</td>
        <td>Accusamus.</td>
    </tr>
    <tr>
        <td>Omnis.</td>
        <td>Accusamus?</td>
        <td>Eius!</td>
        <td>Recusandae!</td>
        <td>Dolor.</td>
    </tr>
    <tr>
        <td>Magni.</td>
        <td>Temporibus!</td>
        <td>Odio!</td>
        <td>Odit!</td>
        <td>Voluptatum?</td>
    </tr>
    <tr>
        <td>Eum.</td>
        <td>Animi!</td>
        <td>Labore.</td>
        <td>Alias!</td>
        <td>Fuga.</td>
    </tr>
    <tr>
        <td>Quia!</td>
        <td>Quis.</td>
        <td>Neque?</td>
        <td>Illo.</td>
        <td>Ad.</td>
    </tr>
    <tr>
        <td>Officiis.</td>
        <td>Exercitationem!</td>
        <td>Adipisci?</td>
        <td>Officiis?</td>
        <td>In?</td>
    </tr>
    <tr>
        <td>Voluptates?</td>
        <td>Voluptatum.</td>
        <td>Nihil.</td>
        <td>Totam?</td>
        <td>Quisquam!</td>
    </tr>
    <tr>
        <td>Soluta.</td>
        <td>Tempore!</td>
        <td>Cupiditate.</td>
        <td>Beatae.</td>
        <td>Perspiciatis.</td>
    </tr>
    <tr>
        <td>Porro.</td>
        <td>Officia?</td>
        <td>Error.</td>
        <td>Culpa?</td>
        <td>Fugit.</td>
    </tr>
    <tr>
        <td>Et?</td>
        <td>Nemo.</td>
        <td>Nisi?</td>
        <td>Totam!</td>
        <td>Voluptate.</td>
    </tr>
    <tr>
        <td>Saepe?</td>
        <td>Vero.</td>
        <td>Amet?</td>
        <td>Illo!</td>
        <td>Laborum!</td>
    </tr>
    <tr class="purple">
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
        <th>Color</th>
        <th>URL</th>
    </tr>
    <tr>
        <td>Atque!</td>
        <td>Tenetur.</td>
        <td>Optio.</td>
        <td>Iure.</td>
        <td>Porro.</td>
    </tr>
    <tr>
        <td>Atque.</td>
        <td>Alias.</td>
        <td>Doloremque.</td>
        <td>Velit.</td>
        <td>Culpa.</td>
    </tr>
    <tr>
        <td>Placeat?</td>
        <td>Necessitatibus.</td>
        <td>Voluptate!</td>
        <td>Possimus.</td>
        <td>Nam?</td>
    </tr>
    <tr>
        <td>Illum!</td>
        <td>Quae.</td>
        <td>Expedita!</td>
        <td>Omnis.</td>
        <td>Nam.</td>
    </tr>
    <tr>
        <td>Consequuntur!</td>
        <td>Consectetur!</td>
        <td>Provident!</td>
        <td>Consequuntur!</td>
        <td>Distinctio.</td>
    </tr>
    <tr>
        <td>Aperiam!</td>
        <td>Voluptatem.</td>
        <td>Cupiditate!</td>
        <td>Quae.</td>
        <td>Praesentium.</td>
    </tr>
    <tr>
        <td>Possimus?</td>
        <td>Qui.</td>
        <td>Consequuntur.</td>
        <td>Deleniti.</td>
        <td>Voluptas.</td>
    </tr>
    <tr>
        <td>Hic?</td>
        <td>Ab.</td>
        <td>Asperiores?</td>
        <td>Omnis.</td>
        <td>Animi!</td>
    </tr>
    <tr>
        <td>Cupiditate.</td>
        <td>Velit.</td>
        <td>Libero.</td>
        <td>Iste.</td>
        <td>Dicta?</td>
    </tr>
    <tr>
        <td>Consequatur!</td>
        <td>Nobis.</td>
        <td>Aperiam!</td>
        <td>Odio.</td>
        <td>Nemo!</td>
    </tr>
    <tr>
        <td>Dolorem.</td>
        <td>Distinctio?</td>
        <td>Provident?</td>
        <td>Nisi!</td>
        <td>Impedit?</td>
    </tr>
    <tr>
        <td>Accusantium?</td>
        <td>Ea.</td>
        <td>Doloribus.</td>
        <td>Nobis.</td>
        <td>Maxime?</td>
    </tr>
    <tr>
        <td>Molestiae.</td>
        <td>Rem?</td>
        <td>Enim!</td>
        <td>Maxime?</td>
        <td>Reiciendis!</td>
    </tr>
    <tr>
        <td>Commodi.</td>
        <td>At.</td>
        <td>Earum?</td>
        <td>Fugit.</td>
        <td>Maxime?</td>
    </tr>
    <tr>
        <td>Eligendi?</td>
        <td>Quis.</td>
        <td>Error?</td>
        <td>Atque.</td>
        <td>Perferendis.</td>
    </tr>
    <tr>
        <td>Quidem.</td>
        <td>Odit!</td>
        <td>Tempore.</td>
        <td>Voluptates.</td>
        <td>Facere!</td>
    </tr>
    <tr>
        <td>Repudiandae!</td>
        <td>Accusamus?</td>
        <td>Soluta.</td>
        <td>Incidunt.</td>
        <td>Aliquid?</td>
    </tr>
    <tr>
        <td>Quisquam?</td>
        <td>Eius.</td>
        <td>Obcaecati?</td>
        <td>Maxime.</td>
        <td>Nihil.</td>
    </tr>
    <tr>
        <td>Minus.</td>
        <td>Magni?</td>
        <td>Necessitatibus?</td>
        <td>Asperiores.</td>
        <td>Iure.</td>
    </tr>
    <tr>
        <td>Ipsa!</td>
        <td>Temporibus.</td>
        <td>Non!</td>
        <td>Dolore.</td>
        <td>Veritatis.</td>
    </tr>
    <tr>
        <td>Ea!</td>
        <td>Officia?</td>
        <td>Doloribus?</td>
        <td>Deleniti?</td>
        <td>Dolorem!</td>
    </tr>
    <tr>
        <td>Sequi?</td>
        <td>Molestias!</td>
        <td>Nesciunt.</td>
        <td>Qui.</td>
        <td>Doloribus?</td>
    </tr>
    <tr>
        <td>Id.</td>
        <td>Enim?</td>
        <td>Quam!</td>
        <td>Sunt!</td>
        <td>Consequuntur.</td>
    </tr>
    <tr>
        <td>Reprehenderit?</td>
        <td>Ut?</td>
        <td>Veritatis!</td>
        <td>Corporis!</td>
        <td>Ipsa.</td>
    </tr>
    <tr>
        <td>Blanditiis!</td>
        <td>Veniam!</td>
        <td>Tenetur.</td>
        <td>Eos?</td>
        <td>Repellat!</td>
    </tr>
    <tr>
        <td>Enim?</td>
        <td>Atque!</td>
        <td>Aspernatur?</td>
        <td>Fugit.</td>
        <td>Voluptatibus!</td>
    </tr>
    <tr>
        <td>Nihil.</td>
        <td>Distinctio!</td>
        <td>Aut!</td>
        <td>Rerum!</td>
        <td>Dolorem?</td>
    </tr>
    <tr>
        <td>Inventore!</td>
        <td>Hic.</td>
        <td>Explicabo.</td>
        <td>Sit.</td>
        <td>A.</td>
    </tr>
    <tr>
        <td>Inventore.</td>
        <td>A.</td>
        <td>Nam.</td>
        <td>Beatae.</td>
        <td>Consequatur.</td>
    </tr>
    <tr>
        <td>Eligendi.</td>
        <td>Illum.</td>
        <td>Enim?</td>
        <td>Dignissimos!</td>
        <td>Ducimus?</td>
    </tr>
    <tr>
        <td>Eligendi!</td>
        <td>Fugiat?</td>
        <td>Deleniti!</td>
        <td>Rerum?</td>
        <td>Delectus?</td>
    </tr>
    <tr>
        <td>Sit.</td>
        <td>Nam.</td>
        <td>Eveniet?</td>
        <td>Veritatis.</td>
        <td>Adipisci!</td>
    </tr>
    <tr>
        <td>Nostrum?</td>
        <td>Totam?</td>
        <td>Voluptates!</td>
        <td>Ab!</td>
        <td>Consequatur.</td>
    </tr>
    <tr>
        <td>Error!</td>
        <td>Dicta?</td>
        <td>Voluptatum?</td>
        <td>Corporis!</td>
        <td>Ea.</td>
    </tr>
    <tr>
        <td>Vel.</td>
        <td>Asperiores.</td>
        <td>Facere.</td>
        <td>Quae.</td>
        <td>Fugiat.</td>
    </tr>
    <tr>
        <td>Libero?</td>
        <td>Molestias.</td>
        <td>Praesentium!</td>
        <td>Accusantium!</td>
        <td>Tenetur.</td>
    </tr>
    <tr>
        <td>Eveniet.</td>
        <td>Quam.</td>
        <td>Quibusdam.</td>
        <td>Eaque?</td>
        <td>Dolore!</td>
    </tr>
    <tr>
        <td>Asperiores.</td>
        <td>Impedit.</td>
        <td>Ullam?</td>
        <td>Quod.</td>
        <td>Placeat.</td>
    </tr>
    <tr>
        <td>In?</td>
        <td>Aliquid.</td>
        <td>Voluptatum!</td>
        <td>Omnis?</td>
        <td>Magni.</td>
    </tr>
    <tr>
        <td>Autem.</td>
        <td>Earum!</td>
        <td>Debitis!</td>
        <td>Eius.</td>
        <td>Incidunt.</td>
    </tr>
    <tr>
        <td>Blanditiis?</td>
        <td>Impedit.</td>
        <td>Libero?</td>
        <td>Reiciendis!</td>
        <td>Tempore.</td>
    </tr>
    <tr>
        <td>Quasi.</td>
        <td>Reiciendis.</td>
        <td>Aut?</td>
        <td>Architecto?</td>
        <td>Vero!</td>
    </tr>
    <tr>
        <td>Fuga!</td>
        <td>Illum!</td>
        <td>Tenetur!</td>
        <td>Vitae.</td>
        <td>Natus.</td>
    </tr>
    <tr>
        <td>Dolorem?</td>
        <td>Eaque!</td>
        <td>Vero?</td>
        <td>Quibusdam.</td>
        <td>Deleniti?</td>
    </tr>
    <tr>
        <td>Minus.</td>
        <td>Accusantium?</td>
        <td>Ab.</td>
        <td>Cupiditate.</td>
        <td>Atque?</td>
    </tr>
    <tr>
        <td>Hic.</td>
        <td>Eligendi.</td>
        <td>Sit?</td>
        <td>Nihil.</td>
        <td>Dolor.</td>
    </tr>
    <tr>
        <td>Quidem.</td>
        <td>In?</td>
        <td>Nesciunt?</td>
        <td>Adipisci.</td>
        <td>Neque.</td>
    </tr>
    <tr>
        <td>Eos.</td>
        <td>Incidunt!</td>
        <td>Quis?</td>
        <td>Quod?</td>
        <td>Vitae!</td>
    </tr>
    <tr>
        <td>Ullam!</td>
        <td>Facilis.</td>
        <td>Tempora!</td>
        <td>Accusantium.</td>
        <td>Consequuntur?</td>
    </tr>
    <tr>
        <td>Numquam?</td>
        <td>At.</td>
        <td>Incidunt.</td>
        <td>Tenetur?</td>
        <td>Voluptatem.</td>
    </tr>
    <tr>
        <td>Iusto?</td>
        <td>Inventore.</td>
        <td>Molestias.</td>
        <td>Accusantium.</td>
        <td>Sunt.</td>
    </tr>
    <tr>
        <td>Repellendus!</td>
        <td>Ex.</td>
        <td>Magnam.</td>
        <td>Odit!</td>
        <td>Iste?</td>
    </tr>
    <tr>
        <td>Id!</td>
        <td>Reiciendis?</td>
        <td>Rem.</td>
        <td>Quae!</td>
        <td>Laborum?</td>
    </tr>
    <tr>
        <td>Exercitationem?</td>
        <td>Maiores.</td>
        <td>Minima.</td>
        <td>Nemo!</td>
        <td>Sequi.</td>
    </tr>
    <tr>
        <td>Qui.</td>
        <td>Impedit?</td>
        <td>Reprehenderit.</td>
        <td>Distinctio.</td>
        <td>Natus?</td>
    </tr>
    <tr>
        <td>Suscipit!</td>
        <td>Tenetur.</td>
        <td>Cumque!</td>
        <td>Molestiae.</td>
        <td>Fugiat?</td>
    </tr>
    <tr>
        <td>Sunt?</td>
        <td>Quis?</td>
        <td>Officia.</td>
        <td>Incidunt.</td>
        <td>Voluptate.</td>
    </tr>
    <tr>
        <td>Possimus.</td>
        <td>Mollitia!</td>
        <td>Eveniet!</td>
        <td>Temporibus.</td>
        <td>Mollitia!</td>
    </tr>
    <tr>
        <td>Incidunt.</td>
        <td>Fugiat.</td>
        <td>Error.</td>
        <td>Odit.</td>
        <td>Cumque?</td>
    </tr>
    <tr>
        <td>Maxime?</td>
        <td>Qui!</td>
        <td>Sapiente!</td>
        <td>Natus.</td>
        <td>Soluta?</td>
    </tr>
    </tbody>
</table>


0
投票

您只能在

position="sticky"
元素上设置
th
(而不是
thead

th {
    /* ... */
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
}

.table-section
中删除溢出设置:

.table-section {
    width: 100%;
    /*overflow-x: scroll;*/
    /*overflow-y: hidden;*/
    padding-bottom: 20px; 
}
© www.soinside.com 2019 - 2024. All rights reserved.