Responsive Table

  • Use stickyHeading or stickyColumn props if you want to make the header sticky and/or your first column.
default
  • will darken if an element inside the row is focused on
  • add a div with style="width: 500px;" to any header cell you want to force wider
  • adapted from https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/
  • The example above has text-xs font-semibold text-gray-600 uppercase tracking-wider classes added to the table header th elements
  • The following wrapper element makes for a full screen sticky table on page where the header element also has an z-index of 2.
svelte
<div class="sticky top-0 relative z-2 h-screen flex flex-col bg-white">
<ResponsiveTable>
<thead>
<th>Foo</th>
<th>Bar</th>
</thead>
<td>1</td>
<td>2</td>
</ResponsiveTable>
</div>
Edit page on GitHub
Instrument Panel