Svelte可调整列宽表格背景色无法随列扩展问题求助

问题核心：你用flex布局的表头和行容器默认会被父容器宽度限制，无法跟随内部列的总宽度自适应扩展，导致列宽调整后背景色只覆盖原固定区域。

修复步骤 #

1. 将表头容器和每行容器的flex类替换为inline-flex，让容器宽度由内部列的总宽度决定，而非被父容器宽度束缚。
2. 移除列元素上的last:flex-grow，这个属性会强制最后一列占满剩余空间，干扰列宽的自适应计算。

修改后的完整代码 #

<div class="flex flex-col overflow-auto">
    <!-- 表头容器改用 inline-flex -->
    <div class="text-left font-bold inline-flex bg-zinc-400">
        {#each columns as column, index}
            {#if column?.plugins?.hide && column.plugins?.hide?.visible}
                <div class="whitespace-nowrap">
                    <div
                        class="flex justify-between"
                        style="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}
        <!-- 行容器改用 inline-flex -->
        <div class="inline-flex odd:bg-zinc-100">
            {#each columns as column}
                {#if column.plugins?.hide?.visible}
                    <div
                        class="p-1 whitespace-nowrap overflow-hidden"
                        style="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>

效果验证 #

调整列宽后，表头和行的背景色会完整覆盖整个表格宽度：

内容的提问来源于stack exchange，提问作者skelaw