I have a .test
div with
grid-template-columns: auto auto auto;
. The column width is set to vary based on the element width, and I also used 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.