Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop?

I attempted to achieve this with the following code:

<table class="table table-bordered w-md-auto w-100 text-start mb-2">

However, the w-100 class has priority with !important, causing it to always display as 100% width instead of auto on desktop view.
I have tried different combinations of w-100 and w-auto at various breakpoints, but I still can't get it to be 100% wide on mobile and auto on desktop.

Please note that I am unable to use JavaScript or add custom CSS to override the bootstrap settings.

htmlcssbootstrap-5

Answer №1

The ideal way to handle this using Bootstrap is to leverage the default width: 100% assigned to .table, and then override it for desktop screens with the following CSS:

@media (min-width: 576px) {
  .table {
    width: auto;
  }
}

You mentioned that you're unable to add custom CSS inline, which means adding a @media query within a style attribute on the table won't work. In this case, another approach would be to create two versions of the table – one for mobile and one for desktop – and toggle their visibility using Bootstrap's display classes like d-{x}:

<table class="table table-bordered text-start mb-2 d-sm-none">
  <caption>
    Mobile table
  </caption>
  ...
</table>

<table class="table table-bordered text-start mb-2 w-auto d-none d-sm-table">
  <caption>
    Desktop table
  </caption>
  ...
</table>

This method isn't recommended due to duplicating markup. If adding an external .CSS file isn't an option, consider including styling directly in the HTML itself, like so:

<style type="text/css">
  @media (min-width: 576px) {
    .table {
      width: auto;
    }
  }
</style>

If there are concerns about custom CSS affecting other elements, assign a custom class or unique ID to the table and target that instead of .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

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall. My query now is how can I vertically center these images so they ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...

javascriptphphtmlcsswordpress

Loading Images in Advance with jQuery, Native JavaScript, and CSS

After successfully implementing a method to hover on a small image and load an additional image to the right side of the page, I am now looking to enhance user experience by preloading images. Is there a way to preload an image using JQuery, allowing it t ...

javascriptjquerycssimagepreloading

One login for accessing multiple forms

I am trying to figure out a way to use one login for two different forms that serve different functions. How can I pass the login details between these two functions? Just to clarify, I only have knowledge of JavaScript and VBScript, not jQuery. For inst ...

javascripthtmlasp-classic

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

javascriptjqueryhtmlajaxjson

Retrieving the checkbox value from a dropdown selection

I'm stuck and feeling lost here - I must be missing something obvious. Any help will be greatly appreciated! (I am a beginner in html and javascript) I have created a dropdown menu with an unordered list of items populated from JSON data. Here is the ...

javascripthtmlcheckbox

How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not ...

htmlcss

There are additional elements that can be toggled, but I prefer to only toggle the one that I have selected

Every time I click on a table a, intending to toggle the .info inside the same div, it also toggles the .info in other divs. Can someone provide assistance with this issue? function info() { $('.table a').click(function() { $('.info ...

javascriptjqueryhtmlclicktoggle

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

htmlcsshover

Using CSS units such as vw, vh, or percentage to specify height is not possible

In my Ionic app, I am adjusting the width and height of a div based on the viewport dimensions. This setup functions correctly on the browser and Android 4.4 devices. However, it does not work as expected on Android 4.2 (the height is constrained to the te ...

androidcsscordovaionic-framework

Tips for properly utilizing "require" in application.css with the Skeleton framework

I am currently working on implementing the skeleton-rails CSS framework into my application. Within the app/views/layouts/application.html.erb file, I have created containers and a list nav that require styling. Following the guidelines provided by the ske ...

cssruby-on-railsframeworksskeleton-css-boilerplate

Guide to changing an image on a canvas with KineticJS

I am currently working on developing a canvas that will display a hotel floor view. I have images stored in a database which I am drawing onto the canvas using x and y coordinates from the database as reference points. However, I want to add touch events t ...

javascriptjqueryhtmlkineticjs

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

What steps do I need to take to launch an embedded kml tour?

This marks the beginning of my journey into the world of online forums! I used to rely on Stack Exchange for answers to my questions, but most of the time, someone else had already asked what I needed to know. It goes to show how effective this website is. ...

htmlrgoogle-mapskmlgoogle-earth

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

I am experiencing an issue where the pseudo element ::after is not appearing in my browser. I am currently working with React.js and Material UI's makeStyles. Here is the code snippet causing the problem: modalTitle: { borderBottom: '2px sol ...

javascriptcssreactjsmaterial-uijsx

Selenium webdriver unable to locate an empty element

I'm currently trying to find a specific element using selenium webdriver: <div class="lv-product__details"><div class="lv-product__details-head"><span class="lv-product__details-sku"> M40712 ...

pythonhtmlseleniumweb-scraping

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

javascripthtmlfastapihtmx

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

htmlcsshover

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries