Menu
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?
460
The CSS to make all the columns equal in width is as follows. The table-layout: fixed; rule specifies that the table is to take its dimensions from the <table> element's width and the width of the first row of cells (or the <col> elements, if you have them).
col-lg- stands for column large ≥ 1200px. col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
Three Equal Columns .col-sm-4. .col-sm-4. .col-sm-4. The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops.
If you use col class the columns will be of equal width. If you use col-auto the width of the column will be the width of the contents in the column. You can even use a combination of both, like below. In this case the first column width will be equal to the contents of that column.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
