Equalizing the width of col-auto across multiple rows

Suppose I have the following set of 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 results in:

https://i.sstatic.net/yAuJi.png

My desired output is:

https://i.sstatic.net/GZg4y.png

How can I ensure that the columns maintain consistent widths across different rows, matching the width of the largest column?

cssbootstrap-4

Answer №1

Consider using the CSS property display:table in the following way:

.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

Give this a try.

Create a table that spans the full width of the container. Set col1 to occupy all available space, and let the other two columns adjust accordingly. Prevent text wrapping in the table cells for a seamless display.

.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>

If you have any questions, feel free to ask.

Answer №3

If you're looking to create a grid layout, consider using display: grid.

You can then customize the styling of your rows to fit your design preferences.

.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

Utilize the grid display property :

    <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

For optimal results, it is recommended to utilize col-sm-* in place of col-auto.

Answer №6

To create a table without borders, you can use the following code snippet:

<table border="0">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>

<tr>
    <td>Cell 1</td>
    <td>Cell 2 with more text</td>
    <td>Cell 3 with even more text</td>
</tr>

<tr>
    <td>Cell 1</td>
    <td>Cell 2 shorter text</td>
    <td>Cell 3 shorter text</td>
</tr>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling images using CSS and AngularJS's NG-Repeat functionality

I am currently working on formatting images in AngularJS to display them next to each other in rows of four. However, it seems like when the code is generated from Angular, it is not displaying as expected. Below is a snippet of my HTML: <span ng-repea ...

javascripthtmlcssangularjs

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Trouble with Safari browser windows and Mac Safari compatibility

Hello everyone, I have a CSS code that I need help with. See below: .left { margin-bottom: 20px; } It works fine on Windows OS with Safari and Chrome browsers, but it's all messed up on Mac OS Safari. After debugging in Mac, I found that it need ...

htmlcssmacossafari

The functionality of 'ngbPopover' in Ng-bootstrap may be affected if the parent container contains a 'transform' css property

Struggling to implement Ng-bootstrap's 'ngbPopover' functionality, I encountered a frustrating issue where the popover would not display after clicking the button. After numerous hours of troubleshooting, I was relieved to discover the root ...

cssangularng-bootstrap

Why isn't the email validation functioning properly when implemented through data annotation in my view?

I'm encountering an issue with my email validation logic in an ASP.NET MVC form. The email field is designed for both model and view, but there doesn't seem to be any error indicated by the browser when I inspect it. Here's a snippet of the ...

asp.net-mvcbootstrap-4data-annotations

A guide on applying an active class upon user click in a navigation tab

Within my ASP.NET MVC web application, I have the following code snippet displaying two tabs while utilizing Bootstrap 2.0.2: <ul class="nav nav-tabs" id="myTab"> @if(Model.hasRacks) { <li> @Ajax.ActionLink("Show Related Racks", " ...

jquerycssasp.nettwitter-bootstraptabs

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

javascriptcss

Enhancing a video tag with a mysterious dark mask

I'm looking for a way to darken a video in my hero section to make it easier to see the white menu items that are getting lost in the brightness. Any tips on how to achieve this using CSS or Bootstrap? <template> <section class="se ...

htmlcsstwitter-bootstrapbootstrap-5

How can you style text with a circular border using CSS?

I'm struggling to locate an example of what I need. My goal is to make a circle around my text using CSS. While I've seen examples of circles with the text inside, in this case, I aim to have a circle surrounding the text. Here's an illustr ...

htmlcss

an online platform design

I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...

htmlcss

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

javascriptjquerycss

Choosing a group of kids who all share the same element tag

I currently have a situation where I need to display only the first two paragraphs in a div when the page loads, with the remaining paragraphs hidden. I am struggling to achieve this and am seeking guidance on how to do so. In the jsfiddle example provided ...

javascriptjqueryhtmlcss

Having several contact forms embedded within a single webpage

I am currently in the process of developing a prototype website and my objective is to have multiple forms on a single page. My goal is to have a form for each service, where users can click on the service and fill out a form to request a quote. The first ...

javascriptphphtmlbootstrap-4contacts

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

Utilizing Bootstrap and customized JavaScript functions for enhancing form validation

I am in the process of creating a form that includes multiple validation rules for most of its fields. Initially, I utilized Bootstrap form validation because I appreciate its handling of error messages and valid input notifications to the user. This metho ...

javascripthtmlbootstrap-4

Access a CSS file from a directory other than the main folder

I have an HTML file in the main folder (X-folder) which also contains CSS. I converted the HTML to ASP and now need to put it inside an ASP[Y] folder. My question is, since my CSS file is in the main folder [X], how can I access it from there if I am in th ...

htmlcssfileasp-classicstylesheet

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

Including 'active' in an HTML button does not trigger the styles specified in the :active pseudo-class

When a button is clicked, I want its color to change. Below are the HTML elements in question: <div class='chatbot-container'> <div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" & ...

javascripthtmlcss

What methods can I use to display or conceal certain content based on the user's location?

I'm looking to display specific content exclusively to local users. While there are APIs available for this purpose, I'm not sure how to implement them. I'm interested in creating a feature similar to Google Ads, where ads are tailored base ...

javascriptcsshtml