Making col-auto the same width between multiple rows - css

Question

Lets say I have the following rows:
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
This produces:
What I am looking to achieve:
What approach could I take to ensure the columns maintain the same widths between these different rows, so that they all become the width of the largest column?

Answer 1

You can try display:table like this:
.container {
display: table;
}
.container>.row {
display: table-row;
}
.container>.row>* {
display: table-cell;
padding:5px;
white-space:nowrap;
}
.col {
width:100%;
}
<div class="container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>

Answer 2

Try this.
Using a table which is set to fill the entire width. Have set col1 to take up all the space avaliable. Because its a table, the other 2 columns will just work.
Have set the text in the table cells to not wrap so you can see it working fluidly.
.custom-table {
border: 0;
width: 100%;
}
.col-wide {
width: 100%;
}
.row td {
white-space: nowrap;
padding: 5px;
}
<table class="custom-table">
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2 longest one ffdssdgg</td>
<td>Row 3 longest one</td>
</tr>
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2 shorter</td>
<td>Row 3 shorter</td>
</tr>
</table>
Any questions, shout.

Answer 3

Maybe you can use display: grid.
And after you can style your rows as you want.
.container>.row {
display: grid;
grid-template-columns: 50% auto auto;
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>

Answer 4

Use grid display :
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto ;
grid-gap: 10px;
}
.grid-container > div {
text-align: left;
padding: 20px 0;
}
</style>
<div class="grid-container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>

Answer 5

Just use col-sm-* instead of col-auto.

Answer 6

use table with no border, for example like this:
<table border="0">
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2 longest one</td>
<td>Row 3 longest one</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2 shorter</td>
<td>Row 3 shorter</td>
</tr>