Блог

Я использую компонент react-table для своего приложения react. Однако при попытке сделать заголовок липким элементы таблицы по-прежнему отображаются с зазором над заголовком (изображение ниже, Thu 12/17 должно быть просто частью данных таблицы). Я уже установил для отображения заголовка таблицы значение sticky, а для верхнего — значение 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" amp;amp; <Button onClick={handleShow3} style = {{fontSize:"2vw", backgroundColor:"#f2f2f2"}}className="blurredText">{cell.render('Cell')} </Button> } 
                {cell.value !== "Register for VIP" amp;amp; <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%; */
  
}
 

Я действительно перепробовал все, например, добавил отступы в верхнюю часть элементов таблицы, но, похоже, ничего не работает. Я был бы очень признателен за любые предложения!