The Bootstrap table remains unresponsive despite using the .table-responsive class

I have created a bootstrap table but I am facing an issue with the horizontal scroll on mobile devices. Even after adding the table-responsive class to the element with the .table class, it is not working as expected.

<div class="table-responsive table-area">
      <table class="table table-striped table-dark bordered-table">
        <thead>
            <tr>
              <th scope="col">✔️</th>
              <th scope="col">Questions</th>
              <th scope="col">❤️</th>
            </tr>
        </thead>
        
        <tbody>

        <% allLists.forEach(item=>{ %>

              <tr>
                <th scope="row"> <input class="form-check-input checkbox-solved" type="checkbox" value="" id="flexCheckDefault"> </th>
                <td> <a href="<%= item.url %>"><%= item.name %></a> </td>
                <td> <input class="form-check-input checkbox-favourite" type="checkbox" value="" id="flexCheckDefault"> </td>
              </tr>

        <% }) %>
        </tbody>
      </table>
    </div>

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

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

The mobile view is not displaying the green tick column in the table.

Here is the CSS code for the table:


.table-area {
  margin-top: 50px;
  max-width: 1000px;
}

.table-area table {
  text-align: center;
}

table a{
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
}

table a:hover {
  color: goldenrod;
}

I have tried removing the max-width property from the CSS but the issue persists. Any help would be greatly appreciated.

Could someone please assist me with this code?

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

It's clear from the image that your fourth question text lacks spacing, causing it not to wrap properly. When dealing with long strings without whitespace, it's important to set a specific width to ensure proper wrapping. You may need to utilize Responsive Web Design - Media Queries in this case.

Here is an example of wrapping with fixed width. Consider incorporating media queries for optimal display on different devices. 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        width: 135px;
        word-wrap: break-word;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

Answer №2

Seemingly absurd, but altering the class from table-responsive{overflow-x:auto;...} to table-responsive{overflow-x: auto; ...} (inserting a space between the colon and auto in the css file obtained from Bootstrap) reactivates the class functionality. I faced the same problem and this simple trick resolved it for me once more.

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

Incorporate an onclick event to the elements within the array

I'm currently working on iterating over an array and adding an onclick event to each element. My goal is to be able to click on each div and have them log their values in the console. However, I am facing a challenge in applying the onclick event to e ...

javascripthtmlcss

Rendering textures in Firefox using Three.js

I am currently working on creating a plane using three.js and applying a texture to it. The texture itself is generated from a canvas element. Interestingly, I have encountered some compatibility issues with Firefox specifically, as other browsers like IE ...

javascriptfirefoxthree.js

Creating a Loan Payment Estimator using HTML - A Step-by-Step Guide

I'm in the process of creating a new website with godaddy.com and am struggling to code a calculator for customers to determine their payments. The calculator must include fields for Loan Amount, Loan Length in Months, Interest Rate, and Monthly Payme ...

htmlcsshtml-table

What is the best way to locate the nearest marker using the Google Maps Direction Service?

Currently, I am engaged in the development of a Google Maps project where I am integrating markers retrieved from a database onto the map using the drawMarkers function. In addition to this, the Google Maps feature tracks your current location and refreshe ...

javascriptangularjsgoogle-mapsionic-framework

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image

Struggling to properly center the footer on my Django template

I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination. Base HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict ...

htmlcssdjangosticky-footer

Firebase's push() method compared to Angularfire's $save() operation

When comparing angularfire .$save() to firebase .push(), what are the differences? I understand that push() generates a unique key when data is stored, but I'm having trouble replicating this behavior with angularfire. Should I stick to using .push() ...

javascriptangularjsfirebaseangularfire

Inspecting a substring of an element dynamically added in VueJs

When I click a button in my form, it adds a new line. The challenge is making sure that each new line evaluates independently and correctly. In this case, the task involves checking the first 2 digits of a barcode against a dataset to determine a match or ...

javascriptvue.jsvuejs2

What is the best approach to incorporating Ant-design-vue via cdn in my project?

I've been working on a Vue macro application for specific functionality in NetSuite. Since I can't utilize npm or other package installers, I've resorted to using CDN. The Vue app and Ant Design are both functioning properly, but the issue l ...

javascriptvue.jsantdnetsuiteant-design-vue

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to ensure that my input values are saved when I reload the page?

I am trying to create a form where users can enter a name and a mark. The names and marks entered should be stored in an associative array when the submit button is clicked, as long as the mark entered is less than or equal to 100. If a mark greater than ...

phphtmlarrayssessionmultidimensional-array

Updating a specific row in a table using PHP and SQL

I am having an issue with updating rows in a table that pulls information from a database. Each row has an input tag labeled COMPLETE, which the user can click on to update the database by changing a boolean field from 0 to 1. However, I am facing a prob ...

phphtmlmysql

Before each existing DIV in a loop, a new div is inserted using the insertBefore

const len = document.getElementById('parent').children.length for (let i = 0; i < len; i++) { const div = document.createElement("div"); document.getElementById('parent').insertBefore(div, document.getElementById('parent' ...

javascript

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

I encountered an error message stating "TypeError: Cannot read property 'controls' of undefined" in the code that I am not familiar with. My goal is to identify the source of this error. Below is the HTML code snippet from my webpage: <div ...

javascriptangular

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...

htmlcsshtml-table

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

javascriptjqueryhtmlcss

Navigate horizontally through columns by scrolling when clicking on Prev/Next buttons in Bootstrap 5

I have implemented 2 buttons that scroll the DIV left and right, but it scrolls a fixed width instead of scrolling each column in Bootstrap 5 on clicking Prev/Next. Can someone assist me with this? Thank you. DEMO JSFiddle: https://jsfiddle.net/hsmx2f5z/ ...

javascriptjquerycssbootstrap-4bootstrap-5

Is it possible to retain various delimiters after dividing a String?

In the code below, the someString gets split into an array using specified delimiters in separators var separators = ['\\.', '\\(', '\\)', ':', '\\?', '!&apos ...

javascriptnode.js

Steps to extract selected values from the MUI data grid

Can values be retrieved from a mui DataGrid? I have a table and I would like to create a custom export that takes into account user filters and the display status of columns. However, I need to access these filtered values. Is there a way to achieve this ...

javascriptmaterial-uidatagrid

Identifying and troubleshooting issues in a React application operating within an nginx proxy

My React app is currently running on localhost:3000, while my Backend API is running on localhost:8181. To address cross-origin request issues and ensure compatibility, I have implemented an nginx reverse proxy setup for both the react app and backend API. ...

javascriptreactjsdebuggingnginxwebstorm