Creating tables with equal column width in Bootstrap 5

Is there a method to ensure equal width for all columns in a bootstrap table? By default, it appears to allocate more space to columns with larger content, but I want them all to have the same width. Below is my code:

<table class="table table-hover">
<thead>
<tr>
    <th scope="col">#</th>
    <th scope="col">All</th>
    <th scope="col">Selected</th>
    <th scope="col">1</th>
    <th scope="col">12.5</th>
    <th scope="col">301</th>
    <th scope="col">405.88</th>
    <th scope="col">77</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
    <th scope="row">123456</th>
    <td class="table-danger"></td>
    <td class="table-success"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</tbody>

The "selected" column appears significantly wider due to more text content, although there is ample space to maintain equal column width.

If possible, I'd like to avoid using the "col-x" classes since my columns are dynamically generated and may exceed 12 columns.

Answer №1

If you want to customize the layout of your table header, you can easily do so without the need for any extra CSS. Simply utilize the col-<n> class to make the necessary adjustments.

<tr>
    <th scope="col" class="col-1">#</th>
    <th scope="col" class="col-3">All</th>
    <th scope="col" class="col-3">Selected</th>
    <th scope="col" class="col-1">1</th>
    <th scope="col" class="col-1">12.5</th>
    <th scope="col" class="col-1">301</th>
    <th scope="col" class="col-1">405.88</th>
    <th scope="col" class="col-1">77</th>
</tr>

Answer №2

By simply setting table-layout to fixed in Bootstrap 5, you will automatically have columns with equal width.

yourfile.html

<table class="table table-hover custom-class"> ... </table>

your-custom-styles.css

.custom-class {
   table-layout: fixed;
}

Answer №3

Make sure to add a specific class to your table cells ('td') and set their dimensions using CSS.

It may also be important to establish the overall size of your table.

table {
  table-layout: fixed;
  width: your_custom_size px;
}

Answer №4

No additional CSS is needed. Simply place all Columns within a single Row and utilize the row-cols class. This means, instead of assigning a class to each Column for its width, you define the width of all Columns using a class in the parent Row.

The snippet below specifies that only 2 Columns should be placed on each Row, but you can adjust the 2 to any value between 1 and 12.

<div class="row row-cols-2">
    <div class="col">
      <!-- Content 1 -->
    </div>
    <div class="col">
      <!-- Content 2 -->
    </div>
    <div class="col">
      <!-- Content 3 -->
    </div>    
    <div class="col">
      <!-- Content 4 -->
    </div>

    <!-- Add as many columns as desired -->

</div>

It should be noted that adding the row or col class to table elements can lead to layout challenges.

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

Using Paper Checkbox to Toggle the Visibility of a Div in Polymer

Having experience with Meteor, I typically used JQuery to toggle the display of a div along with paper-checkbox: HTML: <paper-checkbox name="remoteLocation" id="remote-chk" checked>Remote Location</paper-checkbox> <div id="autoUpdate" clas ...

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

The HTML form does not function properly on OSX when it contains buttons with Cyrillic names in windows

After installing a site locally on my OSX, which was developed under Windows with cyrillic encoding for some string values, I encountered an issue. I noticed that certain buttons with cyrillic values were not functioning properly until I changed the value ...

Get tailored components from a table using Selenium in Python

Currently, I am facing an issue with my code while attempting to extract specific data from a table on a device's web server. The error seems to be related to finding a particular element in a column of the table using what appears to be an invalid ex ...

what is the best way to display camera view in full screen on an iOS application?

What method should I use on an iPhone to launch the camera in full screen mode? Additionally, how can I overlay a compass on top of the camera view on iOS? ...

Get a list of all languages supported by browsers using JavaScript

Within my HTML user interface, I have a dropdown that needs to display a list of all installed browser languages except for the first one. I managed to retrieve the first language (en-us), but I also have the zh-CN Chinese pack installed on my operating s ...

Adjust the color of the IconButton

I am trying to customize the color of an IconButton by setting it to red <IconButton variant='contained'> <StarBorderRoundedIcon color='red' /> </IconButton> However, when I try this, the red color ...

The method for connecting the width of a panel to the height of the viewport in Ext Js

I'm looking to automate the adjustment of a panel's height based on the viewport's height using Ext js. Although achievable using listeners, I believe utilizing Ext js variable binding would be more efficient. However, I've encountered ...

Tips on customizing default Polymer CSS

Currently, the core-toolbar features an indent class that shifts the title to the right by 60px. However, material design guidelines suggest that the margin should actually be 80px (oddly enough, the number 60 is not mentioned in the documentation). I cou ...

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

What might be causing the navigation to malfunction in Firefox?

Could you please help me identify the issue with the navigation on this website? It seems to work correctly on webkit, but not on firefox! Intended vs actual ...

"An issue arises with jqPlot axes and legend when exporting images, as they are not rendering

After successfully rendering my jqPlot, I encountered an issue when exporting it as an image. The axes text and legend labels aren't displaying correctly in the exported image - the text seems to be shifting. Here's a comparison of the actual plo ...

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

What is the best way to use CSS in ReactJS to insert an image into a specific area or shape?

Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown ...

Ways to change the role link in child elements inherited from the parent in terms of Accessibility

How can I create a tooltip with dynamically added tooltip content div requiring a role link for the aria label to be appended as needed? The initial HTML of the tooltip before expansion is: <div class="tooltip" tabindex="0" aria-expa ...

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...