Add contained prop to table

[ganyicz]

The scenario

When a table is used inside a bordered container like card, its columns are pushed towards the outer edges:

<flux:card class="p-0">
    <flux:table>
        ...
    </flux:table>
</flux:card>

The problem

Table columns and cells automatically remove the padding from first and last column:

...first:ps-0 last:pe-0...

To override this, the the original padding needs to be added back individually with an important modifier:

<flux:table.columns>
    <flux:table.column class="ps-3!">...</flux:table.column>
    ...
    <flux:table.column class="pe-3!">...</flux:table.column>
</flux:table.column>

<flux:table.rows>
    <flux:table.cell class="ps-3!">...</flux:table.cell>
    ...
    <flux:table.cell class="pe-3!">...</flux:table.cell>
</flux:table.rows>

The solution

1. Add contained prop:

2. Add [:where(&)] to all padding classes to allow overriding them without important modifier

---

Docs: https://github.com/livewire/flux-docs/pull/200