Fluid table that adapts to three columns on desktop screens, but switches to a single

Can someone help me with this issue?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="table-responsive">
          <table class="table table-borderliness table-product">
            <tbody>
              <tr class="d-flex">
                <td class="col-12">Column 1</td>
              </tr>
              <tr class="d-flex">
                <td class="col-12"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae, dolorem quos nisi debitis quibusdam amet labore blanditiis iusto eos ipsum iure quisquam molestias perspiciatis delectus pariatur magni eum nesciunt.</p>
</td>

The desktop version works fine, but on mobile devices, I want to display only one column that users can scroll through. This single column contains a lot of text, which may include rich text and lists.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To utilize small screens in Bootstrap 4, use col-* instead of col-xs-*. For more information, refer to this link. In your particular case, you should implement it as shown below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="table-responsive">
          <table class="table table-borderliness table-product">
            <tbody>
              <tr class="d-flex">
                <td class="col-12 col-md-4">Column 1</td>
                <td class="col-12 col-md-4">Column 2</td>
                <td class="col-12 col-md-4">Column 3</td>
              </tr>
              <tr class="d-flex">
                <td class="col-12 col-md-4"><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae... (content continues) 
</li>
    </ul></td>
                <td class="col-12 col-md-4"><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae... (content continues)
</li>
    </ul></td>
                <td class="col-12 col-md-4"><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repudiandae... (content continues)
</li>
    </ul></td>
              </tr>
            </tbody>
          </table>
        </div>

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

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

How to align columns from right to left in Bootstrap 4

I've been trying to customize a Bootstrap 4 example, but I'm struggling to change its direction from right to left. .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; ma ...

cssbootstrap-4right-to-left

Hide the div if the content is empty

Within a div created by the_content, there may be content or it could be null, resulting in an empty div that I want to hide. To address this issue, I attempted to store the content in variable $pageContent. However, upon declaring the variable, it either ...

phphtmlwordpress

What is the process for allowing right-click to open in a new tab, while left-clicking redirects to a new page in the current tab?

In my project, I have implemented a multi-page form for users to input information. The left side menu contains items that allow users to switch between different pages while filling out the form. Currently, clicking on any of these items redirects the use ...

htmlcssdjangohttp-redirect

Tips for arranging elements in a customized manner using Bootstrap

Is it possible to reorder columns between desktop and mobile in Bootstrap 5 like the example shown in this image? https://i.sstatic.net/I74PF.jpg I have explored using the order classes and experimented with position: absolute, but I haven't been ab ...

csstwitter-bootstrapbootstrap-5

Initiate a border around the content within an HTML table

Here is the html code that I am working with: <table border="1" style="width:100%;padding-left:12.4em;" bordercolor="F0C347"> <tbody> <tr> & ...

htmlcss

What is the title of a document that is linked behind an HTML link?

I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...

phppythonhtmlhttp

A step-by-step guide on showcasing freshly submitted input data through Ajax

I'm having trouble with this issue! Once I submit the new input, it doesn't show up in the div. Below is my JavaScript code: $('#addVariable').validate({ rules: { variable: {required:true}} , submitHandler: functio ...

phphtmlajax

What is the method to display a navbar exclusively on the product category page?

I am trying to create a navbar that will only show up on the product category page of my Woocommerce website. Is there anyone who can provide me with the necessary PHP or JavaScript code to achieve this? Thank you in advance! Here is the HTML code of the ...

phphtmlwordpress

Ways to demonstrate a specific attribute of the item included in the table

Currently, I am utilizing bootstrap vue and facing a challenge in passing relevant information to a component from the data being transferred to the table. <div> <b-table :items="guests" :fields="fields" : ...

bootstrap-4bootstrap-5bootstrap-vue

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss

What is the best way to restore the original dimensions of images after they have been altered?

I have content displayed on a webpage with images, each image having a specific width or none specified. When a user clicks a button, the content is exported to a PDF file. To ensure the images fit correctly on the PDF page, I adjust their width and height ...

javascriptjqueryhtmlcssangularjs

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js

Tips for utilizing z-index effectively in conjunction with a sticky header

I'm having trouble getting my footer to display correctly on top of a sticky header. Even though they are both in the same level markup, it just doesn't seem to work as expected. Interestingly, a snippet of code below appears to be working, but ...

htmlcssz-index

What steps can I take to ensure that my server is accessible to all users?

After successfully creating a chat server using Node.JS and hosting it on my LocalHost (127.0.0.1), I realized that only I have access to the chat. To make the chat server accessible to everyone, I want to deploy it on my real server. The real server URLs ...

javascripthtmlnode.js

Conceal the div based on the criteria

I need an inline solution for this issue: <div id="xy<%=statusCount%>" style="margin-top: 50px;display:${<%= statusCount %>!=0 ? 'none' : ''};" class="XYZ"> This code is causing an error ...

htmlcssjspjasperserver

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

javascriptjqueryhtmlcsshide

Pressing a button will reset the input spinner in Bootstrap

Is there a way to reset the bootstrap input spinner by clicking a button? I attempted using document.getelementbyId().value = "0" and also tried using reset(), but neither method worked. Any suggestions on how to successfully reset it? function resetScor ...

javascripthtmlcssbootstrap-4