仅使用 css/bootstrap 粘性多个表头 (thead) 行

我试图在下面有多行<thead>标签被粘贴，而表格的其余部分是可滚动的。

This https://stackoverflow.com/questions/12266262/position-sticky-on-thead/59690013#59690013SO 的答案显示了如何使用将标题粘贴到顶部position: sticky标签，但不显示如何在其中粘贴多行<thead>.

使用链接中提到的 CSS 代码thead th { position: sticky; top: 0; }只会粘贴其中的第一行<thead>.

谢谢您的帮助！

如果两个顶部值相同，那么它将相互重叠，请更改第二个标头的top第一个标头的值height。如下所示

thead tr:nth-child(1) th { position: sticky; top: 0; }
thead tr:nth-child(2) th { position: sticky; top: 43px; }

Here top: 43px是第一个标题的高度

完整示例
//HTML

<table id="customers">
<thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <th>Company 2</th>
    <th>Contact 2</th>
    <th>Country 2</th>
  </tr>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</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 Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</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>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>

</table>

//CSS

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
thead tr:nth-child(1) th { position: sticky; top: 0; }
thead tr:nth-child(2) th { position: sticky; top: 43px; }

示例链接到jsfiddle https://jsfiddle.net/sameerthekhans/L4yd2brm/1/