未工作位置粘在表格头部

Question

position 是粘性的，overflow-x 是滚动的：plan - space - trafic 直到 20 属性

我也希望位置是粘性的：计划1 - 计划2 - 计划3 - 计划4 - 计划5 直到计划20

添加代码CSS：

table.shop_table.linux-host thead th { position: sticky; top: 0; }

但没有工作！

     <style>
    table.shop_table.linux-host { display: block; position: relative; overflow-x: scroll; margin-top: 5px; } 
    table.shop_table.linux-host thead th:first-child, table.shop_table.linux-host tbody th { display: block; right: 0; position: sticky; z-index: 1; } 
    table.shop_table.linux-host th, table.shop_table.linux-host td { min-width: 150px; }</style>
            <table class="shop_table linux-host">
                <thead>
                    <tr>
                        <th>plan</th>
                        <th>plan 1</th>
                        <th>plan 2</th>
                        <th>plan 3</th>
                        <th>plan 4</th>
                        <th>plan 5</th>
                       <th>until the plan 20</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>space</th>
                        <td>1 gig</td>
                        <td>2 gig</td>
                        <td>3 gig</td>
                        <td>4 gig</td>
                        <td>5 gig</td>
                        <td>until the 20 gig</td>
                    </tr>
                    <tr>
                        <th>trafic</th>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>until the 20 ultimated</td>
                    </tr>
                </tbody>
            </table>

如果您不明白我的问题，请告诉我，我会解释更多

Answer 1

试试这个：-

table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }


.tableFixHead {
  overflow: auto;
  height: 100px;
}

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

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Answer 2

table {
  margin: 1em 0;
  border-collapse: collapse;
  border: 0.1em solid #d6d6d6;
}
caption {
  text-align: left;
  font-style: italic;
  padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
}

th {
  vertical-align: bottom;
  background-color: #666;
  color: #fff;
}
tr:nth-child(even) th[scope=row] {
  background-color: #f2f2f2;
}
tr:nth-child(odd) th[scope=row] {
  background-color: #fff;
}
tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
td:nth-of-type(2) {
  font-style: italic;
}
th:nth-of-type(3),
td:nth-of-type(3) {
  text-align: right;
}
#table-sticky thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

    
    
<table id="table-sticky">
  <caption>Books with a Fixed Column Header Row</caption>
  <thead>
    <tr>
      <th>Author!</th>
      <th>Title</th>
      <th>Year</th>
      <th>ISBN-13</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miguel De Cervantes</td>
      <td>The Ingenious Gentleman Don Quixote of La Mancha</td>
      <td>1605</td>
      <td>9783125798502</td>
    </tr>
    <tr>
      <td>Gabrielle-Suzanne Barbot de Villeneuve</td>
      <td>La Belle et la Bête</td>
      <td>1740</td>
      <td>9781910880067</td>
    </tr>
    <tr>
      <td>Sir Isaac Newton</td>
      <td>The Method of Fluxions and Infinite Series: With Its Application to the Geometry of Curve-lines</td>
      <td>1763</td>
      <td>9781330454862</td>
    </tr>
    <tr>
      <td>Mary Shelley</td>
      <td>Frankenstein; or, The Modern Prometheus</td>
      <td>1818</td>
      <td>9781530278442</td>
    </tr>
    <tr>
      <td>Herman Melville</td>
      <td>Moby-Dick; or, The Whale</td>
      <td>1851</td>
      <td>9781530697908</td>
    </tr>
    <tr>
      <td>Emma Dorothy Eliza Nevitte Southworth</td>
      <td>The Hidden Hand</td>
      <td>1888</td>
      <td>9780813512969</td>
    </tr>
    <tr>
      <td>F. Scott Fitzgerald</td>
      <td>The Great Gatsby</td>
      <td>1925</td>
      <td>9780743273565</td>
    </tr>
    <tr>
      <td>George Orwell</td>
      <td>Nineteen Eighty-Four</td>
      <td>1948</td>
      <td>9780451524935</td>
    </tr>
    <tr>
      <td>Nnedi Okorafor</td>
      <td>Who Fears Death</td>
      <td>2010</td>
      <td>9780756406691</td>
    </tr>
  </tbody>
</table>