如何冻结表格的ad部分

Question

我有一个包含两个标题行的表格演示。

<thead>
    <tr>
       <th colspan="4"><big>Variable Details</big></th>
    </tr>
    <tr>               
       <th>Variable Name</th>
       <th>Starting Value</th>
       <th>Default Value</th>
       <th>Description</th>
     </tr>
 </thead>

我想冻结前两个标题行（表格的标题部分）。有什么想法吗

Answer 1

将CSS属性位置更改为“粘性”以获得粘性表格头。见下文。

CSS：

thead { position: sticky; top: 0px; z-index: 10; } 

注意：您可能需要根据其他 CSS 属性调整 z-index。

Answer 2

参考许多网站链接后，我能够使用纯 CSS 修复两个标题行。 更新修复。

<div id="header-wrap"><b>Variable Details</b>

     <table border=1 cellpadding=0 cellspacing=0 width=100% style="margin-top:5px">

            <thead>
            <tr>            
                  <td  background-color:#E0EBEB;"><b>Variable Name</b></td>
                 <td  background-color:#E0EBEB;"><b>Starting Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Default Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Description</b></td>
            </tr>      
            </thead>
            </table>
</div>

CSS：

#header-wrap { position: fixed; width: 100%; height: 55px; top: 0; text-align:center; background-color:#F0F0F0; margin-top:0px; margin-bottom:40px;}
             td {width:25% }

Answer 3

如果你想冻结

<thead>

，你可以给它一个

sticky

位置。

注意：为了让

<thead>

上的边框不消失，我不得不尝试这个策略：

边框样式不适用于粘性位置元素（确保不要折叠边框）

const tableContainer = document.querySelector('.table-container');
const tbody = tableContainer.querySelector('tbody');

fetch('https://jsonplaceholder.typicode.com/todos')
  .then((res) => res.json())
  .then((todos) => {
    todos.forEach(({ id, title, completed }) => {
      tbody.insertAdjacentHTML('beforeend', `
        <tr>
          <td style="text-align:right">${id}</td>
          <td>${title}</td>
          <td style="text-align:center">${completed}</td>
        </tr>
      `);
    });
  });

/* General setup */
*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  --table-header-color: #4A4;
  --table-row-even-color: #DFD;
  --table-row-odd-color: #FFF;
  --table-border-color: #040;
}
body {
  font-size: smaller;
}

/* Core table wrapper setup */
.table-container {
  width: 100%;
  height: 126px; /* Change this to whatever you want */
  overflow-y: auto;
}
.table-container table {
  width: 100%;
}
.table-container thead {
  position: sticky; /* Important */
  top: 0;
  z-index: 10;
}
.table-container th, .table-container td {
  padding: 0.125rem 0.25rem;
}

/* Borders (need to specify left/right and top/bottom) */
.table-container {
  border: thin solid var(--table-border-color);
}
.table-container table {
  border-collapse: separate; /* Do not collapse! */
  border-spacing: 0;
}
.table-container th, .table-container td {
  border-right: thin solid var(--table-border-color);
}
.table-container th {
  border-bottom: thin solid var(--table-border-color);
}
.table-container th:last-child, .table-container td:last-child {
  border-right: none;
}
.table-container tbody tr td {
  border-bottom: thin solid var(--table-border-color);
}
.table-container tbody tr:last-child td {
  border-bottom: none;
}

/* Colors (does not require the wrapper) */
thead {
  background: var(--table-header-color);
}
tbody tr:nth-child(odd) {
  background: var(--table-row-odd-color);
}
tbody tr:nth-child(even) {
  background: var(--table-row-even-color);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--table-header-color); 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--table-header-color); 
}

<h2>Scrolling Table</h2>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Completed</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>