Колонна жидкости с фиксированным элементом коллектора ⇐ CSS

[Anonymous]

У меня есть таблица с table-layout="auto" для автоматической ширины столбцов и height=400 для фиксированного заголовка, но прокрутка выходит за пределы заголовка, чего быть не должно.
При использовании table-layout="fixed" прокрутка зафиксируется, но столбцы не получат всю ширину. Он использует Vue3 и элемент библиотеки plus.

Код: Выделить всё

import { ref, onBeforeMount, watch } from 'vue'

// Define props and emits (añadí `desync` para debugging)
const props = defineProps()

defineEmits(['sort-change'])

const handleRowClick = (row: any) => {
console.log(row)
}

// defaultSort definido antes del render
const defaultSort = ref({
prop: 'id',
order: 'ascending' as 'ascending' | 'descending' | null, // Element Plus usa 'ascending'/'descending'
})

// datos internos que usa la tabla (permite simular desincronía)
const internalData = ref([])

function applySort(arr: Record[], sort: { prop?: string; order?: string | null }) {
if (!sort?.prop || !sort.order) return
const prop = sort.prop
const order = sort.order === 'ascending' ? 1 : -1
arr.sort((a, b) => {
if (a[prop] == null) return 1 * order
if (b[prop] == null) return -1 * order
if (a[prop] > b[prop]) return 1 * order
if (a[prop] < b[prop]) return -1 * order
return 0
})
}

function shuffle(arr: Record[]) {
// Fisher–Yates
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[arr[i], arr[j]] = [arr[j], arr[i]]
}
}

// inicializar antes del primer render
onBeforeMount(() => {
internalData.value = props.data ? [...props.data] : []
if (props.desync) {
// para reproducir el bug: la UI se muestra en orden distinto al sort por defecto
shuffle(internalData.value)
// mantiene defaultSort para la cabecera pero la lista mostrada está desordenada
} else {
// aplicar sort por defecto antes del render para evitar flicker
applySort(internalData.value, defaultSort.value)
}
})

// si los datos externos cambian, sincronizar respetando el modo desync
watch(
() => props.data,
(newData) => {
internalData.value = newData ? [...newData] : []
if (props.desync) {
shuffle(internalData.value)
} else {
applySort(internalData.value, defaultSort.value)
}
},
{ immediate: false }
)



:deep(.cell) {
white-space: nowrap !important;
}

Как это исправить? Мне нужно сочетание table-layout="fixed" и table-layout="auto" для столбцов полной ширины.

Подробнее здесь: https://stackoverflow.com/questions/798 ... er-element