Как обеспечить, чтобы каждый столбец таблицы занимал 25% ширины и допускал горизонтальную прокрутку в HTML/CSS? ⇐ CSS

[Anonymous]

Я пытаюсь сделать каждый столбец в таблице шириной 25%, чтобы в таблице поместилось только четыре столбца. Когда столбцов больше четырех, я хочу, чтобы таблица прокручивалась горизонтально. Вот моя текущая попытка:

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

.table-container {
max-width: 100%; /* Adjust this as per your layout */
overflow-x: auto;
}
table {
width: auto; /* Let the table size itself based on content */
min-width: 100%; /* Ensure table fills its container */
border-collapse: collapse;
}
th, td {
width: 25%; /* Each column occupies 25% of table width */
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

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

Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8




Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
Data 7
Data 8

Я ожидал, что каждый столбец будет занимать ровно 25 % ширины таблицы, но он ведет себя не так, как предполагалось. Как я могу настроить это, чтобы гарантировать, что ровно четыре столбца видны без горизонтальной прокрутки, а дополнительные столбцы запускают горизонтальную прокрутку по мере необходимости?

Подробнее здесь: https://stackoverflow.com/questions/787 ... al-scrolli