Adjust the width of individual columns in Bootstrap 4 responsive tables to ensure they have specific widths

I am currently working on setting up a table where specific columns require a fixed width and do not adjust automatically.

Despite attempting a method to achieve this, I have encountered issues as the width still adjusts based on the length of the text.

Any suggestions on how to tackle this problem?

<div class="container">
    <table class="table table-bordered">
        <thead>
            <tr class="m-0">
                <th class="w-20">a</th>
                <th class="w-10">b</th>
                <th class="w-20">c</th>
                <th class="w-40">d</th>
                <th class="w-10">e</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0">
                <th class="w-20">a. Column with fixed width of 20</th>
                <th class="w-10">b. Narrower column width</th>
                <th class="w-20">c. Intended to be smaller, testing w-20 with maximum text length.</th>
                <th class="w-40">d. Largest width column not responding to w-40!</th>
                <th class="w-10">e. Another narrow column</th>
            </tr>
        </tbody>
    </table>
</div>
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Those specific classes are not available in bootstrap, you will only find classes for 25%, 50%, 75%, and 100%. If you need them, you have to create them yourself:

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%
}

.w-40 {
  width: 40%;
}

table {
  table-layout: fixed;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr class="m-0">
        <th class="w-20">a</th>
        <th class="w-10">b</th>
        <th class="w-20">c</th>
        <th class="w-40">d</th>
        <th class="w-10">e</th>
      </tr>
    </thead>
    <tbody>
      <tr class="m-0">
        <th class="w-20">a. Width with 20</th>
        <th class="w-10">b. Smaller width column</th>
        <th class="w-20">c. Should be small but I'm adding maximum text here just to test if w-20 is working.</th>
        <th class="w-40">d. Biggest width but not working!</th>
        <th class="w-10">e. Another small column</th>
      </tr>
    </tbody>

  </table>
</div>

Further information can be found at

Sizing

You can easily customize the width and height of elements relative to their parent using our width and height utilities. The default options include support for 25%, 50%, 75%, and 100%.

Also, check out

https://www.w3.org/wiki/CSS/Properties/table-layout

table-layout

The table-layout property determines the algorithm used to arrange the table cells, rows, and columns.

Answer №2

opt for personalized classes for maintaining consistent width.

Refer to the following class:

.w-20{ width: 200px !important; }

Answer №3

If you want to ensure compatibility across all browsers, it is recommended to utilize the following code:

.w-20 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20% !important;
  flex: 0 0 20% !important;
  max-width: 20%;
}

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

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Using the "img" tag with only a width value in CSS will automatically calculate the height proportionally. However, finding the height value using developer tools or jQuery's height() method may not work as expected. See the example below: HTML code ...

jquerycssimageheightwidth

What issues could arise from utilizing PHP for generating variables within my CSS file?

One major limitation of CSS is the absence of variables. It would be beneficial to have the ability to use variables for controlling things like the location of imported CSS and color schemes within a design. An alternative solution could involve using a ...

phpcss

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

jquerycssgoogle-chromeoffset

Show the advancement of a process as it runs in a pop-up window

Currently, I am working on revamping a webpage to give it a more modern look. However, I'm encountering some challenges when trying to add simple functionality to a modal window. On the webpage, users upload a file, and upon clicking submit, a shell ...

javascriptphpajaxtwitter-bootstrap

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...

csstwitter-bootstraptwitter-bootstrap-3

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

htmlioscsscloud

How to properly center and align the width of a figcaption element within an image placed in a figure element

I've been struggling for two days now trying to fix an issue with the alignment of images and captions on my Django application. In my app, users can upload images, and I'm using figure and figcaption tags to display the image with a caption. Ho ...

cssdjangohtmlwidthcenter

I'm confused as to why my server is displaying all columns from my database, even though I specifically indicated which columns I

Why is my b-table showing all columns from my table even though I only selected some? Here is the server-side code that fetches the selected columns. It seems to work fine with just bootstrap and not with bootstrap-vue. router.get('/users', fun ...

vue.jsvuejs2bootstrap-4bootstrap-tablebootstrap-vue

Tips for collapsing or expanding a single button in Angular 6

I want to create rows of collapsible buttons in my code, but every time I visit the page, all the buttons are already expanded. Additionally, when I click on any button, they all expand or collapse simultaneously. HTML <div id="accordion" *ngFor="let ...

htmlangularbootstrap-4

Issues with Curved Corner Touchdown Feature

Having trouble with getting the round css to work properly in the below code It seems to be only applying the background color, but not the border styling The border code is on the same line as the round css: style=" border : 1px solid #D6D6D6; and t ...

htmlcss

Is there a way to create a shadow effect using css?

I am attempting to replicate the subtle shadow effect displayed in the image. https://i.sstatic.net/fa7iB.png https://i.sstatic.net/YgY0W.png Struggling with implementing this shadow effect using CSS. I experimented with box-shadow: box-shadow: 0 3px 6p ...

htmlcss

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

The issue arises when attempting to use Bootstrap date and time components simultaneously

I am encountering an issue with the date picker and datetimepicker when used together in my form. If I only work on time or date individually, they function properly. However, when both are included, the time is not working correctly as it displays the dat ...

javascriptjqueryhtmldatebootstrap-4

Tips for preventing menu flickering caused by overflow during CSS animations

I recently created a vertical menu with an interesting underline effect that appears when hovering over the menu items. Even though the snippet initially failed to execute, I discovered this cool hover effect (taken from here) which I wanted to implement: ...

htmlcss

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

javascriptjquerycssjquery-eventskeystroke

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

cssnode.jsexpress

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

htmlcsssasshaml

Chrome isn't displaying the text color of the link

I'm having an issue with a link that is styled like a button. It looks fine in Internet Explorer and Firefox, but not on Chrome. For example: The problem lies with the teal button in the center of the page that reads "follow issue." I intended for ...

htmlcss

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

Is it possible to center the image and resize it even when the window is resized?

My goal is to position an image in the center of the screen by performing some calculations. I've tried using: var wh = jQuery(window).innerHeight(); var ww = jQuery(window).innerWidth(); var fh = jQuery('.drop').innerHeight(); var fw = jQ ...

javascriptjqueryhtmlcss