I am trying to solve an issue with html tables. I have a table that will have 6 columns.
but they will be laid out in the page like this:
- the first column should have a minimum width so that it can hold upto 20 characters. If there are more than 20 characters, then it will have the text ellipses effect (three dots).
- the second and third column will have a fixed width.
- the fourth column will have 4 side by side divs inside it.each of this divs will hold some texts and the texts inside will have ellipses effect.
- The fifth column will also have a text ellipses effect.
- the sixth column is a fixed width column.
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Vue Table</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<div id="app">
<div class="table-container">
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second</th>
<th>Third Column</th>
<th>Fourth Column</th>
<th>Fifth Column</th>
<th>Sixth</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td :title="row.first">{{ row.first }}</td>
<td>{{ row.second }}</td>
<td>{{ row.newColumn }}</td>
<td>
<div class="three-divs-container">
<div class="box" title="This is some long text that will be truncated">Department texts
goes here</div>
<div class="box" title="This is some long text that will be truncated">Director of
Sales
and Marketing (Marketing & Advertising)</div>
<div class="box" title="Another long text that needs ellipsis">Codemoly</div>
<div class="box" title="Short text">15.5 years</div>
</div>
</td>
<td :title="row.fourth">{{ row.fourth }}</td>
<td>{{ row.sixth }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
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" }
]
}
});
</script>
</body>
</html>
here is the output of this:
The problem here is that the fifth column is having so many empty spaces on its right. In this scenario, I want to want the fourth column to take more spaces so that it can show its texts more.
Summary:
Trying to show as much as texts I can, on these columns. If this table is opened with ultra wide monitor, all columns should show full texts. for smaller devices like mobile, it should show a horizontal scrollbar. Vanilla javascript example is also welcome
