Table 具有固定 Header 行和可滚动内容

Question

我正在尝试实现具有固定 header 行和可滚动内容的 table。我研究了许多在线示例，包括 Stack Overflow 上的示例，并且正在使用位置：sticky 属性，但到目前为止运气不好。

CSS & HTML 如下所示。谁能看出我做错了什么？

=========================

CSS：

@charset "utf-8";

table {
    border: 1px solid black;
    empty-cells: show;
    border-collapse: collapse;
    margin: 0ex auto;
}
td,th {
    text-align: left;
    padding: .5em;
}
td {
    border: 1px solid black;
    margin: 0;
}
th {
   position: sticky;
   top: 0;
}
thead {
    color: white;
    background-color: black;
}

=========================

HTML：

<!DOCTYPE HTML>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Archaic Terms</title>
<link href="../css/terms-test.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<table>

<thead>
<tr>
   <th>Term</th>
   <th>Meaning</th>
</tr>
</thead>

<tbody>
<tr><td>abide, abideth</td><td>wait, remain</td></tr>
<tr><td>abode</td><td>home</td></tr>
<tr><td>accord</td><td>bestow, grant; agreement, opinion</td></tr>
<tr><td>actuate</td><td>influence, guide</td></tr>
<tr><td>addrest</td><td>addressed</td></tr>
<tr><td>Æthiop</td><td>Ethiopian</td></tr>
<tr><td>afford</td><td>Provide, make available</td></tr>
<tr><td>alas</td><td>Expresses sorrow or regret</td></tr>
<tr><td>anew</td><td>again, once more</td></tr>
<tr><td>anoint</td><td>sanctify or consecrate</td></tr>
<tr><td>apace</td><td>quickly, immediately</td></tr>
<tr><td>apostolic</td><td>Relating to the 12 Apostles, their faith or their teaching</td></tr>
<tr><td>apple (of eye)</td><td>pupil (of eye)</td></tr>
<tr><td>archangel</td><td>A high ranking angel</td></tr>
<tr><td>anew</td><td>again, once more</td></tr>
<tr><td>anoint</td><td>sanctify or consecrate</td></tr>
<tr><td>apace</td><td>quickly, immediately</td></tr>
<tr><td>apostolic</td><td>Relating to the 12 Apostles, their faith or their teaching</td></tr>
<tr><td>apple (of eye)</td><td>pupil (of eye)</td></tr>
<tr><td>archangel</td><td>A high ranking angel</td></tr>
</tbody>

</table>
<script src="../js/footer.js"></script>

</body>
</html>

Answer 1

<!DOCTYPE HTML>
<html lang="en-us">
   <head>
      <meta charset="utf-8">
      <title>Table</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         table {
         border-collapse: collapse;
         width: 1000px;
         table-layout: fixed;
         }
         td,th {
         padding: 5px;
         min-width: 200px;
         border-right: 1px solid #ccc
         }
         thead tr {
         background: #888;
         color: #eee;
         display: block;
         position: relative;
         }
         tbody {
         display: block;
         height: 200px;
         width: 100%;
         overflow-y: auto;
         overflow-x: hidden;
         }
         tbody tr:nth-child(even) {
         background: #ddd;
         }
      </style>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
               <th>Column 4</th>
               <th>Column 5</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
            <tr>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
               <td>Content</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Table 具有固定 Header 行和可滚动内容

Table with Fixed Header Row and Scrollable Content

css

position

sticky