我如何使用Overflow-X：自动和位置：在我的打字稿和SCSS Code

Question

<div className={styles.tableContainer}>
    <Table
        data={tableData}
        maxRows={50}
        columns={columns}
        renderDataItem={renderDataItem}
        className={styles.table}
        headerClassName={styles.tableHeader}
        headerItemClassName={styles.headerItem}
        bodyRowClassName={styles.tableBodyRow}
        dataClassName={styles.tableData}
        loading={loading}
        controlled
    />
</div>

Scss

.table-container {
    overflow-x: auto;
    position: relative;
}

.table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 0;

    .table-header {
        background-color: var(--color-bg-secondary);
        border: none;
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

is
在一个反应表中，标头和身体都存在在同一容器中，您需要：

标头保持在顶部。 表可允许水平滚动（溢出X：自动）。 标头没有固定高度。

常见的问题是，水平滚动滚动时，标头要么无法正确粘住或不对。 ！ 解决方案 诀窍是为表容器和表标头使用两个单独的元素。然后，使用滚动事件侦听器将标头的水平滚动（scrollleft）与主容器同步。

const StickyTable = ({ data, columns, renderDataItem, loading }) => {
    const tableContainerRef = useRef<HTMLDivElement>(null);
    const tableHeaderRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const tableContainer = tableContainerRef.current;
        const tableHeader = tableHeaderRef.current;

        if (!tableContainer || !tableHeader) return;

        const handleScroll = () => {
            tableHeader.scrollLeft = tableContainer.scrollLeft;
        };

        tableContainer.addEventListener("scroll", handleScroll);
        return () => tableContainer.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <div className="table-container" ref={tableContainerRef}>
            <div className="table-header" ref={tableHeaderRef}>
                {/* Render Table Header */}
            </div>
            <table className="table">
                <tbody>
                    {data.map((item, index) => renderDataItem(item, index))}
                </tbody>
            </table>
        </div>
    );
};

export default StickyTable;

希望这对您也有帮助。

Sissue是，位置：粘性在最近可滚动祖先内的工作，当使用Overflow-X：Auto时，表标头可能会因不同的滚动上下文而错过。

确保塔可容器是可滚动容器 - 这使表标头可以保持在其内部。

集位置：粘在而不是.table头 - 这有助于保持对齐。

使用显示：选择性地块 - 而不是将其应用于.table，而是仅将其应用于和。

.table-container {
    overflow-x: auto;
    position: relative;
    width: 100%; // Ensure the container takes full width
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg-secondary);
}

.table th {
    text-align: left;
    background: var(--color-bg-secondary);
    white-space: nowrap;
}

.table td {
    white-space: nowrap;
}

Answer 1