# Responsive Table

[[ResponsiveTable.composition]]

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

[//begin]: # "Autogenerated link references for markdown compatibility"
[ResponsiveTable.composition]: ResponsiveTable.composition "ResponsiveTable"
[//end]: # "Autogenerated link references"