Столбец жидкости с фиксированным элементом заголовка пользовательского интерфейса ⇐ CSS

[Anonymous]

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








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, arr[j]] = [arr[j], arr]
}
}

// 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" to table-layout="auto"


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