html - 反应表的粘性标题但元素显示在下方？

Question

我正在为我的反应应用程序使用反应表组件。但是，当尝试使标题变粘时，表格元素仍然显示在标题上方的间隙处（下图，12/17 星期四应该只是表格数据的一部分）。我已经将表头显示设置为粘性，顶部设置为 0，但这仍然显示。

没有滚动 有滚动 这是呈现表格的反应部分

return ( 
    <div className='tableContainer'>
    <table {...getTableProps()} className="tableFont">
        {headerGroups.map(headerGroup => (
           <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} width={column.width}>{column.render('Header')}
               <Button style={{border: "none", padding: "0"}} className={(column.Header === "Level" || column.Header === "Instructor")? "blueButton": "hide"} onClick={column.Header === "Level"? handleShow: handleShow2}> <FontAwesomeIcon icon={faInfoCircle}/></Button>
                <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? ' '
                        : ' '
                      : ''}
                  </span>
                  <div>{column.canFilter ? column.render(column.filter) : null}</div>
              </th> 
            ))}
          </tr> 
          
        ))}
     {upcomingDates.map((upcomingDate, index)=> 
      <tbody key= {index.toString()} {...getTableBodyProps()} >
      <span className='dateDivider' style={{textAlign:'left'}}>{upcomingDate.slice(0,-5)}</span>
     {rows.filter(function(row){return (row.original.date=== upcomingDate.slice(4, upcomingDate.length));})
     .map((row) => { 
          prepareRow(row)
          return (
            <tr {...row.getRowProps()} style={{height:'20px'}}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}> 
               {cell.value==="Register for VIP" && <Button onClick={handleShow3} style = {{fontSize:"2vw", backgroundColor:"#f2f2f2"}}className="blurredText">{cell.render('Cell')} </Button> } 
                {cell.value !== "Register for VIP" && <p> {cell.render('Cell')}</p>} </td>
              })}
            </tr>
          )
        })}
   
      </tbody> 

     )
     } 
    </table>
    </div> 

的CSS

.tableContainer{
  /* box-shadow: 8px 8px 12px -3px grey; */
  filter: drop-shadow(10px, 10px, 10px, #F5F5F5);
  border-radius:8px;
  max-height:75vh;
  text-align:center;
  display:block;
  padding:15px;
  overflow: auto;
  background:white;
}

table {
  table-layout: fixed;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;

}

/* div.tableBody { 
  overflow-y: scroll;
    overflow-x: hidden;
} */
table tbody{
  background-color: #f2f2f2;
}

table td { 
  padding: 4px; 
  margin-top: 50px;
}
table th {
  padding: 4px;
  margin-top: 30px;
}
table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #C1F3F7;
  color: black;
  max-width: 100px;
  position: sticky;
  top: 0;
}


.dateDivider{
  font-weight:1000;
  text-align:left;
  width: 100%;
    font-size: 3vw;
    white-space: nowrap;
  /* padding-left: 5%; */
  
}

我真的尝试了所有方法，例如在表格元素的顶部添加填充，但似乎没有任何效果。我真的很感激任何建议！

标签： htmlcssreactjsreact-table