How to make a custom column occupy the entire row? (Max Width)

I tried

columnSpanFull()

columnSpanFull()

columnSpanFull()

columnSpanFull()

on the custom column.

And

<div class="overflow-x-auto">
    <table class="w-full table-auto divide-y divide-gray-200 bg-gray-50 rounded dark:divide-gray-700 dark:bg-gray-800">

<div class="overflow-x-auto">
    <table class="w-full table-auto divide-y divide-gray-200 bg-gray-50 rounded dark:divide-gray-700 dark:bg-gray-800">

<div class="overflow-x-auto">
    <table class="w-full table-auto divide-y divide-gray-200 bg-gray-50 rounded dark:divide-gray-700 dark:bg-gray-800">

<div class="overflow-x-auto">
    <table class="w-full table-auto divide-y divide-gray-200 bg-gray-50 rounded dark:divide-gray-700 dark:bg-gray-800">

on the custom column component.

But it still stays the same size. It does expand on its own though if I add more columns to the custom column table.

Solution

<div class="w-full">
    <table class="w-full">
    ...
    </table>
</div>

<div class="w-full">
    <table class="w-full">
    ...
    </table>
</div>

<div class="w-full">
    <table class="w-full">
    ...
    </table>
</div>

<div class="w-full">
    <table class="w-full">
    ...
    </table>
</div>