table background color does not grow

Issue

I built a table where you can change the width of the columns, but the background color is limited to a given size and I have no idea how to change it. I tried adding width-full, changed overflow and nothing works. I need some help.

example: https://svelte.dev/repl/1c8e3b2ac6fe44619f2c0a84662a5c16?version=4.2.8

<div class="flex flex-col overflow-auto">
    <div class="text-left font-bold flex bg-zinc-400">
        {#each columns as column, index}
            {#if column?.plugins?.hide && column.plugins?.hide?.visible}
                <div class="whitespace-nowrap last:flex-grow">
                    <div
                        class="flex justify-between"
                        style=" min-width: {column.plugins.resize?.initialWidth}px"
                    >
                        {column.header || column.accessor}
                        <div
                            class="w-1  bg-zinc-300 cursor-pointer"
                            on:mousedown={(e) => handleMouseDown(index, e)}
                        />
                    </div>
                </div>
            {/if}
        {/each}
    </div>
    {#each rows as row}
        <div class="flex last:flex-grow odd:bg-zinc-100">
            {#each columns as column}
                {#if column.plugins?.hide?.visible}
                    <div
                        class=" p-1 last:flex-grow whitespace-nowrap overflow-hidden"
                        style="min-width: {column.plugins.resize?.initialWidth}px; width: {column.plugins.resize
                            ?.initialWidth}px;"
                    >
                        {#if column.cell}
                            <svelte:component
                                this={column.cell}
                                info={{
                                    row: row,
                                    column: column,
                                    value: row[column.accessor]
                                }}
                            />
                        {:else}
                            {getNestedValue(row, column.accessor)}
                        {/if}
                    </div>
                {/if}
            {/each}
        </div>
    {/each}
</div>

before resize

after resize

Solution

Consider applying width: max-content to the <div> elements that draws the background color:

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="flex w-full flex-col overflow-auto">
  <div class="flex bg-zinc-400 text-left font-bold w-max">
    <div class="whitespace-nowrap last:flex-grow">
      <div class="flex justify-between" style="min-width: 300px;">
        Id
        <div class="w-1 cursor-pointer bg-zinc-300"></div>
      </div>
    </div>
    <div class="whitespace-nowrap last:flex-grow">
      <div class="flex justify-between" style="min-width: 300px;">
        Name
        <div class="w-1 cursor-pointer bg-zinc-300"></div>
      </div>
    </div>
    <div class="whitespace-nowrap last:flex-grow">
      <div class="flex justify-between" style="min-width: 300px;">
        Net price
        <div class="w-1 cursor-pointer bg-zinc-300"></div>
      </div>
    </div>
    <div class="whitespace-nowrap last:flex-grow">
      <div class="flex justify-between" style="min-width: 300px;">
        Package size
        <div class="w-1 cursor-pointer bg-zinc-300"></div>
      </div>
    </div>
  </div>
  <div class="flex last:flex-grow odd:bg-zinc-100 w-max">
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">1</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">Banananananananananana</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">20.00</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">Box 5kg</div>
  </div>
  <div class="flex last:flex-grow odd:bg-zinc-100 w-max">
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">2</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">Apple</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">20.0000000 0000000000 00000</div>
    <div class="overflow-hidden whitespace-nowrap p-1 last:flex-grow" style="min-width: 300px; width: 150px;">Box 5kg</div>
  </div>
</div>

Answered By - Wongjn