Динамическая ширина HTML -таблица с CSS ⇐ Html

[Anonymous]

Я пытаюсь решить проблему с таблицами HTML. У меня есть таблица, в которой будет 6 столбцов.
, но они будут выложены на странице, как это: < /p>

Первый столбец должен иметь минимальную ширину, чтобы он мог держать до 20 символов. Если существует более 20 символов, то он будет иметь эффект текстовых эллипсов (три точки). < /Li>
Второй и третий столбец будет иметь фиксированную ширину. Эффект эллипсов. < /li>
Шестой столбец - это столбец с фиксированной шириной. < /li>
< /ol>
Вот что я попробовал: < /p>

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

Responsive Vue Table


.table-container {
width: 100%;
overflow-x: hidden;
}

table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* First column with min-width for 20 characters */
th:first-child,
td:first-child {
min-width: 160px;
/* Approximately 20 characters */
max-width: 200px;
width: 15%;
}

/* Fixed width for second, third and sixth columns */
th:nth-child(2),
td:nth-child(2),
th:nth-child(3),
td:nth-child(3),
th:nth-child(6),
td:nth-child(6) {
width: 100px;
}

/* Fourth column takes more space */
th:nth-child(4),
td:nth-child(4) {
width: 40%;
min-width: 300px;
}

/* Fifth column takes remaining space */
th:nth-child(5),
td:nth-child(5) {
width: 25%;
min-width: 150px;
}

/* Enable horizontal scroll only for small screens */
@media screen and (max-width: 768px) {
.table-container {
overflow-x: auto;
}
}

/* Three side-by-side divs with ellipsis inside third column */
.three-divs-container {
display: flex;
gap: 10px;
min-width: 100%;
}

.three-divs-container .box {
flex: 1;
min-width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}









First Column
Second
Third Column
Fourth Column
Fifth Column
Sixth




{{ row.first }}
{{ row.second }}
{{ row.newColumn }}


Department texts
goes here
Director of
Sales
and Marketing (Marketing & Advertising)
Codemoly
15.5 years


{{ row.fourth }}
{{ row.sixth }}







new Vue({
el: "#app",
data: {
tableData: [
{ first: "LongTextExampleThatWillBeTruncated", second: "100", newColumn: "NewData1", third: "VeryLongTextThatShouldTruncate", fourth: "AnotherLongTextThatNeedsEllipsis", sixth: "200" },
{ first: "ShortText", second: "101", newColumn: "NewData2", third: "Data3", fourth: "Data4", sixth: "201" },
{ first: "AnotherLongTextExampleThatExceedsLimit", second: "102", newColumn: "NewData3", third: "MoreTextThatNeedsToBeShortened", fourth: "EvenLongerTextThatMustBeCut", sixth: "202" }
]
}
});

Вот вывод этого:

Проблема - это то, что в пятом колонке есть много пустых ссоров. В этом сценарии я хочу, чтобы четвертый столбец занимал больше мест, чтобы он мог показать свои тексты больше. Если эта таблица открыта с помощью Ultra Wide Monitor, все столбцы должны показывать полные тексты. Для небольших устройств, таких как мобильные устройства, он должен показывать горизонтальную прокрутку. Пример ванильного JavaScript также приветствуется

Подробнее здесь: https://stackoverflow.com/questions/794 ... e-with-css