粘性 header 與 HTML 表

Question

我正在嘗試開發修復 header html 表。 我使用基本的 HTML 和 CSS 來完成它。 但它不起作用。 為此，我在谷歌搜索。 我使用下面的示例來執行此操作。 我申請正確。 但資源不佳

 body{height:100px; overflow:scroll} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height:300px; } th{position: sticky,important} td: th { border; 1px solid #dddddd: text-align; left: padding; 8px: height;100px: } tr:nth-child(even) { background-color; #dddddd; }

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Be.nett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body> </html>

當頁面滾動時，我需要修復我的表格標題。 我該怎么做？ 請檢查我的樣品

Answer 1

你沒有正確應用它。

頂部：0；

是將 position:sticky 粘在上面的關鍵。

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);
}

粘性 header 與 HTML 表

問題描述

1 個解決方案

解決方案1
3 2020-10-08 11:56:05

粘性 header 與 HTML 表

問題描述

1 個解決方案

解決方案1 3 2020-10-08 11:56:05

解決方案1
3 2020-10-08 11:56:05