I have a .test div with
grid-template-columns: auto auto auto;justify-content: start; to align the columns to the left. I chose to use auto instead of 1fr to prevent the columns from stretching to their maximum width.
However, I am facing an issue with aligning the columns neatly like a table does. In the example below, the second .target paragraph in the second .test div is longer than the first one. My goal is to make all other column widths follow the longest one.
P.S.: I prefer not to use tables. While I can utilize JavaScript to find the longest element and adjust the widths accordingly, I am exploring if there is an easier CSS-only solution available.
p {
margin: 0;
}
.test {
column-gap: 30px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: start;
}
p:nth-child(2) {
position: relative;
width: 120px;
}
.flex {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
right: 0;
}For comparison, here's how it would look in a table:
td:nth-child(2) {
position: relative;
width: 120px;
}
.flex {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
right: 0;
top: 0;
}In this table representation, even though the first column "Hellooo" is longer in the second row, all second columns are aligned together.