What is the best way to ensure balance between columns in Bootstrap 4?

Hello everyone! I am currently working on ensuring that all the columns in my table have equal width, except for the update and delete columns which should remain as they are. I'm utilizing Bootstrap 4.5.2 for this task.

Below is the code snippet of my Bootstrap table:

<table class="table table-bordered table-responsive-sm table-hover">
        <thead>
            <tr>
                <th>Date</th>
                <th>TimeSlot</th>
                <th>Room</th>
                <th>Attendees</th>
                <th>update</th>
                <th>delete</th>
            </tr>
        </thead>

                <tbody>
                    <tr class="table">
                        <td class="table">Date</td>
                        <td class="table">Time</td>
                        <td class="table">Room</td>
                        <td class="table">invitee</td>
                        <td class="table" style="display: none">reservationid</td>
                        <td class="table" style="display: none">invitedby</td>
                        <td class="table" style="display: none">workspace</td>
                        <td class="table">
                            <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        </td>
                        <td class="table">
                            <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>                        </td>
                    </tr>
                </tbody>
            }
    </table>

Check out how this Bootstrap table appears in your browser by clicking here.

htmlcssbootstrap-4

Answer №1

To distinguish your data columns from your command columns and apply CSS only to the data columns, you can use the following code:

td.table:not(.command) {
    border: 1px solid black;
    width: 15% !important;
}
<table class="table table-bordered table-responsive-sm table-hover">
        <thead>
            <tr>
                <th>Date</th>
                <th>TimeSlot</th>
                <th>Room</th>
                <th>Attendees</th>
                <th>update</th>
                <th>delete</th>
            </tr>
        </thead>

                <tbody>
                    <tr class="table">
                        <td class="table">Date</td>
                        <td class="table">Time</td>
                        <td class="table">Room</td>
                        <td class="table">invitee</td>
                        <td class="table" style="display: none">reservationid</td>
                        <td class="table" style="display: none">invitedby</td>
                        <td class="table" style="display: none">workspace</td>
                        <td class="table command">
                            <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        </td>
                        <td class="table command">
                            <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>                        </td>
                    </tr>
                </tbody>
            }
    </table>

Answer №2

To enhance the display of your HTML table, consider removing the table class and utilizing table-layout:fixed;. You can then establish a specific width by setting min-content for the last two cells using :nth-last-child().

Note: If you encounter issues with Chrome when using min-content, opt for a static width approximately 5em.

Combining these adjustments will result in improved layout control. Don't forget to run the snippet in fullpage view to observe the desired effect on the last two cells.

table.fixed {
  table-layout: fixed;
}

table.fixed tr> :nth-last-child(-n+2) {
  /*width: min-content; fails with chrome */
  width:5em;
  color:crimson;/* see me ;) */
  text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-responsive-sm table-hover fixed"><!-- added a custom class named fixed -->
  <thead>
    <tr>
      <th>Date</th>
      <th>TimeSlot</th>
      <th>Room</th>
      <th>Attendees</th>
      <th>update</th>
      <th>delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr class="table">
      <td class="">Date</td>
      <td class="">Time</td>
      <td class="">Room</td>
      <td class="">invitee</td>
      <td class="" style="display: none">reservationid</td>
      <td class="" style="display: none">invitedby</td>
      <td class="" style="display: none">workspace</td>
      <td class="">
        <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="far fa-edit" aria-hidden="true"></i></a>
      </td>
      <td class="">
        <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="far fa-trash-alt"></i></a></a>
      </td>
    </tr>
  </tbody>

Answer №3

If you want to make use of flexbox, you can leverage Bootstrap's predefined classes for the layout. Here is an example of the HTML structure:

<table class="table table-bordered table-responsive-sm table-hover">
    <thead class="d-flex">
        <tr class="d-flex col-10 pl-0 pr-0">
            <th class="col-3">Date</th>
            <th class="col-3">TimeSlot</th>
            <th class="col-3">Room</th>
            <th class="col-3">Attendees</th>
        </tr>
        <tr class="d-flex col-2 pl-0 pr-0">
            <th class="col-6">update</th>
            <th class="col-6">delete</th>
        </tr>
    </thead>

    <tbody class="d-flex">
        <tr class="d-flex col-10 pl-0 pr-0">
            <td class="col-3">Date</td>
            <td class="col-3">Time</td>
            <td class="col-3">Room</td>
            <td class="col-3">invitee</td>
            <!-- <td class="table col" style="display: none">reservationid</td>
            <td class="table col" style="display: none">invitedby</td>
            <td class="table col" style="display: none">workspace</td> -->
        </tr>
        <tr class="d-flex col-2 pl-0 pr-0">
            <td class="col-6">
                <a onclick="onUpdate()" style="color: #007bff; cursor: pointer">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i
                ></a>
            </td>
            <td class="col-6">
                <a onclick="onDelete()" style="color: #007bff; cursor: pointer">
                    <i class="fa fa-trash" aria-hidden="true"></i
                ></a>
            </td>
        </tr>
    </tbody>
</table>

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

Browser comparison: Chrome and Firefox - peculiar ID name causing table width difference without CSS. Suspected AdBlocking interference

There seems to be an issue with a table I have in Chrome. Whenever I change the ID name, it either sets the width to zero or doesn't display at all. You can view it here: http://jsfiddle.net/kdubs/W6GTE/ The specific line causing trouble is: <ta ...

htmlgoogle-chrome

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

aligning two elements within a container to have equal heights

I need to position 2 divs inside a container div. Their height should always be the same, regardless of content. To achieve this, I am using absolute positioning with top and bottom set to 0. Currently, the container div #three collapses and hides the cont ...

htmlcsspositionabsolute

Issue with Bootstrap 4 dropdown menu not functioning correctly on Rails 5 mobile view

Having trouble with the dropdown functionality in the navbar code below. The menu button works fine on mobile and desktop, but the nav-item dropdown doesn't function on phones. Using Rails 5.2.2 Bootstrap 4.2.1 <nav class="navbar navbar-expand- ...

ruby-on-railsbootstrap-4

The BeautifulSoup select method is unable to select attribute values containing white space

city = soup.select('a[href="/city/london d12"]') When running the code above, an error message was returned: ValueError: Unsupported or invalid CSS selector: "a[href=/city/london" I'm currently exploring if there are any workarounds or ...

pythonhtmlbeautifulsouphtml-parsing

Mysterious sayings encircling the words fetched through ajax

If the localhost is pointing to the folder named www, where the structure looks like: www/ file/test.cpp index.html I want to dynamically load the content of test.cpp into index.html and display it with the help of highlight.js. Below is the cod ...

javascriptjqueryhtmlajax

Instructions for creating a distinct click listener for each <img> element inside a table cell

Within my table, each row contains multiple columns with images as data. I successfully implemented a 'common listener' that is triggered when any image within a table row is clicked. $('#mytable tbody td img').click(function () { // ...

javascriptjqueryhtml

Problem aligning ul within div element

I'm having trouble aligning my ul element in the center of a div. I tried using the margin: 0 auto method, but it's not working as expected. I've always wondered if setting the width of the ul within a div is necessary for using margin: 0 au ...

htmlcsshtml-lists

Replace the current picture with a newly uploaded one and keep it consistent

On my webpage, there is an image that I want to be able to replace by clicking on it and selecting a new image from the file uploader without showing the upload button. Once the new image is uploaded, I'd like it to replace the current image, and for ...

javascripthtmljquery

Swap out a Dropdown Menu for a text box in a flexible design layout

Is it possible to switch out a Dropdown Menu with a text box in a search form? The textbox needs to match the size of the Dropdown Menu being replaced. Here is the code for the form: <form action="#"> <input type="text" class ...

htmlcsstemplatesresponsive-design

Error: Grunt bake file include is unable to access the specified file

In the root directory, I have an index.html file that I am working with. Upon running grunt, I encountered the following error: Verifying property bake.my_target exists in config...OK Files: index.html -> dist/index.html Options: content="content.j ...

htmlnpmgruntjs

JQuery's accordion with the heightStyle set to "fill" is causing a vertical scrollbar

I recently integrated the JQuery accordion effect into my website and specified the heightStyle: fill so that it would occupy the entire window. However, it seems to be taking up an additional 1 or 2 pixels, causing the vertical scroll bar to appear. I su ...

javascriptjqueryhtmlcss

Prevent the display of cascading div elements by using JavaScript and jQuery scripting

My webpage performs a simple check to verify if Javascript and cookies are enabled on the client's browser. If they are enabled, the script displays the content inside div id="conteudo" and hides the warning message inside div id="aviso". If not, the ...

javascriptjqueryhtmlcss

Display the value of a shortened string

My Goal I aim to develop a method for determining the amount of a string visible before it gets cut off. Motivation In my project, there is a collection of items that can be chosen. A panel presents a concatenated string of the selected item names separa ...

javascripthtmlcssangular

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

javascriptjqueryhtmlcss

Navigating to an offline HTML webpage using JavaScript in a PhoneGap application

I am currently developing a phonegap application. I am attempting to create a login feature where upon clicking the submit button on the Login.html page, I should be directed to a local HTML file. Login.html <tr> <td>&nbsp;</td> ...

javascripthtmlcordova

Steps to implement provided information in a post within the header of a webpage

Recently, I started creating websites from scratch and I encountered a problem that I could use some help with. The issue is when I have a YouTube video embedded in a post, but I want to showcase the video in the header section of that specific post URL wi ...

javascripthtmlcssvideoyoutube

Ways to determine if a class is a part of the bootstrap framework

Is there a way to verify if a class like mt-3 or table-left is part of the bootstrap framework? Are there any online resources, tools, or plugins in VSCode that can assist me in determining if a class is a predefined bootstrap keyword? ...

htmlcssvisual-studio-codebootstrap-4bootstrap-5

Tips for implementing a watermark background image that appears in each section of a single-page website

Currently, I am exploring HTML, CSS, and Bootstrap and facing a particular issue. I am attempting to add a logo to a website as a background. I have already discovered how to do this by following the instructions here. This website is comprised of a sing ...

htmlcssbootstrap-4

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with c ...

cssangularangular-material