Responsive Table

• Use stickyHeading or stickyColumn props if you want to make the header sticky and/or your first column.

• 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>