I have a drawer component with a sticky title area which works perfectly fine. Below this area is another area for the drawer content (tables, lists or forms).
In this case it’s a table. Now I wanted to make the table head also sticky, so that it stays right below the title area, but when I do this, the table head scrolls past the title and sticks to the top of the page.
This could be fixed by making the top property equal to the height of the title area, but is there an easy and responsive way to do this?
Sticky Title and Table Header before scrolling
Sticky Title and Table Header after scrolling
Here’s a simplified version:
The sticky-2-class is my ugly solution but is there a better/responsive way?
My project uses tailwind. I don’t know if there’s an easy tw fix for something like that.
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 10vw;
}
.title {
background-color: lightblue;
width: 100%;
height: 10vh;
text-align: center;
padding: 2rem 0;
}
.sticky {
position: sticky;
top: 0;
}
.sticky-2 {
position: sticky;
top: 5.2rem;
z-index: 10;
}
table {
width: 100%;
}
table thead tr {
text-align: left;
background-color: lightgreen;
}
table td {
padding: 2rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="title sticky">Title</div>
<table>
<thead>
<tr class="sticky">
<th>ID</th>
<th>Name</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>2</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>3</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>4</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>5</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>6</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>7</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>8</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>9</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>10</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>11</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>12</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>13</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>14</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>15</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>16</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>17</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>18</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>19</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>20</td>
<td>abc</td>
<td>def</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried making top the size of the title container, but it isn’t exact, only estimated and what if I want to dynamically display a search field above the table and below the title? that would mess with my ugly solution.
user26705630 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.