Svelte固定列表格滚动时单元格边框消失问题求助

开发带固定列的表格组件（非Svelte相关问题），基础逻辑正常，但横向滚动时固定单元格边框出现异常：

• A. 边框变为透明，非固定单元格内容透过边框显示
• B. 边框随滚动条移动，未保持固定状态

组件代码 #

<script>
    export let columns = [];
    export let data = [];
    export let showRowNumbers = false;
    export let rowNumberOffset = 0;
    export let widthUnit = 'em';

    const defaultWidth = 12;
    const rowNumberWidth = 2;
    let colWidths = [];
    let colLefts = {};
    let tableWidth;
    $: {
        tableWidth = 0;
        for (let i = 0; i < columns.length; ++i) {
            if (columns[i].fixed) {
                colLefts[columns[i].key] = tableWidth;
            }
            const colWidth = columns[i].width ?? defaultWidth;
            tableWidth += colWidth;
            colWidths[i] = colWidth;
        }
    }
</script>
<div class="grid-container">
    {#if columns.length}
        <table style:width={`${tableWidth}${widthUnit}`}>
            <colgroup>
                    {#if showRowNumbers}
                        <col />
                    {/if}
                {#each columns as col, i (col.key)}
                    <col style:width={`${colWidths[i]}${widthUnit}`} />
                {/each}
            </colgroup>
            <thead>
                <tr>
                    {#if showRowNumbers}
                        <th class="fixed"><div>&nbsp;</div></th>
                    {/if}
                    {#each columns as col, index (col.key)}
                        <th class:fixed={col.fixed} style:left={(col.fixed ? `${colLefts[col.key]}${widthUnit}` : 'initial')}>
                            <div>
                                <slot name="fixedColHeader" {col} {index}>
                                    {col.name}
                                </slot>
                            </div>
                        </th>
                    {/each}
                </tr>
            </thead>
            <tbody>
                {#if data?.length > 0}
                    {#each data as row, index (row.id)}
                        <tr class="data">
                            {#if showRowNumbers}
                                <td class="fixed" style:left="0" >
                                        {index + 1 + rowNumberOffset}
                                </td>
                            {/if}
                            {#each columns as col, index (`${row.id}-${col.key}`)}
                                <td class:fixed={col.fixed} style:left={col.fixed ? `${colLefts[col.key]}${widthUnit}` : 'initial'}>
                                        <slot name="dataCell" {col} {row} {index}>
                                            {row[col.key]}
                                        </slot>
                                </td>
                            {/each}
                        </tr>
                    {/each}
                {:else}
                    <tr>
                        {#if showRowNumbers}
                            <td class="fixed" left="0">
                                1
                            </td>
                        {/if}
                        {#each columns as col (col.key)}
                            <td class:fixed={col.fixed} style:left={col.fixed ? `${colLefts[col.key]}${widthUnit}` : 'initial'}>
                                &nbsp;
                            </td>
                        {/each}
                    </tr>
                {/if}
            </tbody>
        </table>
    {:else}
        <div class="no-cols">
            (No columns defined)
        </div>
    {/if}
</div>

<style>
    div.grid-container {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    
    div.no-cols {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    table {
        border-spacing: 0;
        border-width: 0;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        position: relative;
    }

    table th, table td {
        padding: 0.2em;
    }

    table th {
        background-color: lightgray;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }

    table td {
        background-color: white;
    }

    table td, table th {
        border-right: 0.1em solid #525252;
    }

    table tr > td:first-child, table tr > td:first-child {
        border-left: 0.1em solid #525252;
    }

    th.fixed, td.fixed {
        position: sticky;
        z-index: 2;
    }
</style>

解决方案 #

问题核心是border-collapse: collapse与position: sticky的兼容性冲突：表格合并边框时，边框属于表格而非单个单元格，导致固定列的边框无法随单元格保持粘性。以下是修复步骤：

1. 修改表格边框渲染模式 #

将表格的border-collapse: collapse改为border-collapse: separate，保留border-spacing: 0确保单元格无缝衔接：

table {
    border-spacing: 0;
    border-width: 0;
    border-collapse: separate; /* 替换原collapse属性 */
    table-layout: fixed;
    width: 100%;
    position: relative;
}

2. 确保固定列背景不透明 #

给固定单元格设置明确背景色，覆盖后方滚动的内容：

th.fixed, td.fixed {
    position: sticky;
    z-index: 2;
}
/* 单独指定表头和数据行的固定列背景 */
th.fixed {
    background-color: lightgray;
}
td.fixed {
    background-color: white;
}

3. 调整边框归属避免重复 #

因为改为separate模式，需要补充完整边框并避免重复：

table td, table th {
    border-right: 0.1em solid #525252;
    border-bottom: 0.1em solid #525252; /* 添加底部边框 */
}
/* 第一列的左侧边框 */
table tr > th:first-child, table tr > td:first-child {
    border-left: 0.1em solid #525252;
}
/* 表头的顶部边框 */
table thead tr > th {
    border-top: 0.1em solid #525252;
}

4. 修正行号列的定位属性 #

确保行号列的left样式正确应用：

<!-- 行号表头 -->
<th class="fixed" style:left="0"><div>&nbsp;</div></th>
<!-- 空数据行的行号单元格 -->
<td class="fixed" style:left="0">1</td>

内容的提问来源于stack exchange，提问作者José Ramírez