Level 16
It looks like you have an attribute data-flux-table for the flux:table that is applied to the root element for styling and identification. See the documentation.
I am unfortunately struggling with my table inside a flux-card. I would like to achieve the following two behaviors, but I can't manage it. Attached is a screenshot with an example and my current code.
The table header should be sticky when I scroll within the flux-card. The horizontal scrollbar should always be visible at the bottom of the flux-card, not just when I scroll all the way down within the card. Can you help me with this?

<div class="flex max-md:flex-col">
<div class="w-full">
<flux:card class="min-h-[760px] max-h-[760px] overflow-y-auto !p-0">
<flux:table>
<flux:table.columns class="bg-zinc-700">
<flux:table.column class="border-r min-w-8 dark:border-zinc-600"></flux:table.column>
<flux:table.column class="border-r min-w-10 max-w-10 dark:border-zinc-600 "></flux:table.column>
@foreach($columns as $key => $column)
<flux:table.column class="border-r dark:border-zinc-600">{{ $key }}</flux:table.column>
@endforeach
</flux:table.columns>
<flux:table.rows>
@foreach ($outputCollection as $output)
<flux:table.row>
<flux:table.cell class="bg-zinc-800/30 border-r dark:border-zinc-600 !py-1.5 !px-1.5">{{ $loop->index + 1 }}</flux:table.cell>
<flux:table.cell class="bg-zinc-800/30 border-r dark:border-zinc-600 !py-1.5 !px-1.5"><flux:checkbox/></flux:table.cell>
@foreach ($output as $singleEntry)
<flux:table.cell class="border-r dark:border-zinc-600 !py-1.5 !px-1.5"> {{ $singleEntry['value'] }}</flux:table.cell>
@endforeach
</flux:table.row>
@endforeach
</flux:table.rows>
</flux:table>
</flux:card>
</div>
</div>
Please or to participate in this conversation.