时间戳

首页 > 解决方案 > 如何使表格的标题变粘？

html - 如何使表格的标题变粘？

问题描述

有一个表格可以在页面上变得很长，所以标题会丢失，所以我认为粘性标题可以解决这个问题。您向下滚动太远，标题仍然存在，让您知道字段是什么。

我尝试了一切，但它不起作用

我希望你们能帮助我。我将分享原始代码，而无需我对其进行试验。

注意 html 很长，因为它有测试数据。

@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
    margin: 1em 0;
    min-width: 300px;
    width: 100%;
}
.rwd-table .table_header{
    overflow: hidden;
    position: relative;
    overflow-x: auto;
}
.rwd-table tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.rwd-table th {
    display: none;
}
.rwd-table td {
    display: block;
}
.rwd-table td:first-child {
    padding-top: .5em;
}
.rwd-table td:last-child {
    padding-bottom: .5em;
}
.rwd-table td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 6.5em;
    display: inline-block;
}
@media (min-width: 480px) {
    .rwd-table td:before {
        display: none;
    }
}
.rwd-table th, .rwd-table td {
    text-align: left;
}
@media (min-width: 480px) {
    .rwd-table th, .rwd-table td {
        display: table-cell;
        padding: .25em .5em;
    }
    .rwd-table th:first-child, .rwd-table td:first-child {
        padding-left: 0;
    }
    .rwd-table th:last-child, .rwd-table td:last-child {
        padding-right: 0;
    }
}


h1 {
    font-weight: normal;
    letter-spacing: -1px;
    color: #34495E;
}

.rwd-table {
    background: #34495E;
    color: #fff;
    border-radius: .4em;
    overflow: hidden;
}
.rwd-table tr {
    border-color: #46637f;
}
.rwd-table th, .rwd-table td {
    margin: .5em 1em;
}
@media (min-width: 480px) {
    .rwd-table th, .rwd-table td {
        padding: 1em !important;
    }
}
.rwd-table th, .rwd-table td:before {
    color: #dd5;
}
<div class="main_content">
        <div class="header">Welcome!! Have a nice day.</div>
        <div class="info">
            <table class="rwd-table">
                    <tr class="table_header">
                        <th>Movie Title</th>
                        <th>Genre</th>
                        <th>Year</th>
                        <th>Gross</th>
                    </tr>
                <tr>
                    <td data-th="Movie Title">Star Wars</td>
                    <td data-th="Genre">Adventure, Sci-fi</td>
                    <td data-th="Year">1977</td>
                    <td data-th="Gross">$460,935,665</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">Howard The Duck</td>
                    <td data-th="Genre">"Comedy"</td>
                    <td data-th="Year">1986</td>
                    <td data-th="Gross">$16,295,774</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
                <tr>
                    <td data-th="Movie Title">American Graffiti</td>
                    <td data-th="Genre">Comedy, Drama</td>
                    <td data-th="Year">1973</td>
                    <td data-th="Gross">$115,000,000</td>
                </tr>
            </table>
        </div>
    </div>

标签： htmlcss

解决方案

您可以在此链接https://css-tricks.com/position-sticky-and-table-headers/上检查您不能将粘性放置在 thead 或 tr 上，但它适用于 th。所以添加位置：sticky; 顶部：0；到您的 TH（最好为它们创建一个类）并删除表格的样式“溢出：隐藏；”。这对我有用。

@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
    .rwd-table {
        margin: 1em 0;
        min-width: 300px;
        width: 100%;
    }
    .rwd-table .table_header{
        overflow: hidden;
        position: relative;
        overflow-x: auto;
    }
    .rwd-table tr {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .rwd-table th {
        display: none;
    }
    .rwd-table td {
        display: block;
    }
    .rwd-table td:first-child {
        padding-top: .5em;
    }
    .rwd-table td:last-child {
        padding-bottom: .5em;
    }
    .rwd-table td:before {
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 6.5em;
        display: inline-block;
    }
    @media (min-width: 480px) {
        .rwd-table td:before {
            display: none;
        }
    }
    .rwd-table th, .rwd-table td {
        text-align: left;
    }
    @media (min-width: 480px) {
        .rwd-table th, .rwd-table td {
            display: table-cell;
            padding: .25em .5em;
        }
        .rwd-table th:first-child, .rwd-table td:first-child {
            padding-left: 0;
        }
        .rwd-table th:last-child, .rwd-table td:last-child {
            padding-right: 0;
        }
    }


    h1 {
        font-weight: normal;
        letter-spacing: -1px;
        color: #34495E;
    }

    .rwd-table {
        background: #34495E;
        color: #fff;
        border-radius: .4em;
        position: relative /*add this line*/
        /*overflow: hidden;*/
        /*The line above commented*/
    }
    .rwd-table tr {
        border-color: #46637f;
    }

    /*Add the style in this block*/
    .rwd-table th {
        position: sticky;
        top: 0;
        background: black; /*The background-color is optional*/
    }

    /*----------------------------*/

    .rwd-table th, .rwd-table td {
        margin: .5em 1em;
    }
    @media (min-width: 480px) {
        .rwd-table th, .rwd-table td {
            padding: 1em !important;
        }
    }
    .rwd-table th, .rwd-table td:before {
        color: #dd5;
    }
<div class="main_content">
  <div class="header">Welcome!! Have a nice day.</div>
  <div class="info">
    <table class="rwd-table">
      <thead>
        <tr class="table_header">
          <th>Movie Title</th>
          <th>Genre</th>
          <th>Year</th>
          <th>Gross</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="Movie Title">Star Wars</td>
          <td data-th="Genre">Adventure, Sci-fi</td>
          <td data-th="Year">1977</td>
          <td data-th="Gross">$460,935,665</td>
        </tr>
        <tr>
          <td data-th="Movie Title">Howard The Duck</td>
          <td data-th="Genre">"Comedy"</td>
          <td data-th="Year">1986</td>
          <td data-th="Gross">$16,295,774</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
        <tr>
          <td data-th="Movie Title">American Graffiti</td>
          <td data-th="Genre">Comedy, Drama</td>
          <td data-th="Year">1973</td>
          <td data-th="Gross">$115,000,000</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

OBS：将您的“TH”放在 thead 标签而不是 tbody 中。它尊重语义标记。

推荐阅读