Achieve mobile responsiveness for Bootstrap tables

I'm facing an issue with the layout of my bootstrap table code:

<div class="row">
            <div class="col-lg-12 mb-4">
              <!-- Simple Tables -->
              <div class="card">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">Simple Tables</h6>
                </div>
                <div class="table-responsive">
                  <table class="table align-items-center table-flush">
                    <thead class="thead-light">
                      <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Item</th>
                        <th>Status</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><a href="#">RA0449</a></td>
                        <td>Udin Wayang</td>
                        <td>Nasi Padang</td>
                        <td><span class="badge badge-success">Delivered</span></td>
                        <td><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">RA5324</a></td>
                        <td>Jaenab Bajigur</td>
                        <td>Gundam 90' Edition</td>
                        <td><span class="badge badge-warning">Shipping</span></td>
                        <td><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">RA8568</a></td>
                        <td>Rivat Mahesa</td>
                        <td>Oblong T-Shirt</td>
                        <td><span class="badge badge-danger">Pending</span></td>
                        <td><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">RA1453</a></td>
                        <td>Indri Junanda</td>
                        <td>Hat Rounded</td>
                        <td><span class="badge badge-info">Processing</span></td>
                        <td><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">RA1998</a></td>
                        <td>Udin Cilok</td>
                        <td>Baby Powder</td>
                        <td><span class="badge badge-success">Delivered</span></td>
                        <td><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="card-footer"></div>
              </div>
            </div>
          </div>

On mobile devices, instead of stacking below each other, it scrolls horizontally causing inconvenience. Here is an example of how I would like it to appear:

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

The desired appearance should flow vertically downwards like this:

https://codepen.io/roshanjajoriya/pen/yrXNKo

Any suggestions on how I can achieve this responsive design?

Answer №1

Applying the same method works in this scenario-

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    display: none;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}
<div class="row">
            <div class="col-lg-12 mb-4">
              <!-- Simple Tables -->
              <div class="card">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">Simple Tables</h6>
                </div>
                <div class="table-responsive">
                  <table class="table align-items-center table-flush">
                    <thead class="thead-light">
                      <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Item</th>
                        <th>Status</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td data-label="Order ID"><a href="#">RA0449</a></td>
                        <td data-label="Client">Udin Wayang</td>
                        <td data-label="Item">Nasi Padang</td>
                        <td data-label="Status"><span class="badge badge-success">Delivered</span></td>
                        <td data-label="Action"><a href="#" class="btn btn-sm btn-primary">Detail</a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="card-footer"></div>
              </div>
            </div>
          </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

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

Utilize Bootstrap 4's Flexbox feature to ensure rows expand to fit vertical space within a column

Currently, I am working on building a video player using Bootstrap 4 with two columns. One column contains the main video while the other column displays rows with thumbnails and titles. However, I am facing an issue where the rows do not fill the vertical ...

Navigate an HTML table by utilizing the arrow keys for seamless browsing

My spreadsheet made with an HTML table works well, but currently requires the user to click on each <td> cell to edit it. I am using jQuery to capture the click event and show a dialog for editing. I want to enhance the user experience by allowing th ...

Refreshing PHP Script

I have a PHP file that contains a combination of HTML elements, JavaScript functions, and PHP scripts. I need to rerun a specific part of the PHP script repeatedly. Let's consider the following example: <html> <?php $connection = ...

Embedding an image within an HTML textbox using the textboxfor method

Looking to elevate the aesthetic of my project, I decided to incorporate a watermark into my @html.textboxfor. However, despite successfully adding it, I encountered an issue with compatibility on IE 8. As a solution, I aim to include an image within the @ ...

Include additional content following the text enclosed by the span tag, but do not place it

Take a look at this screenshot: https://i.sstatic.net/zojKK.jpg This code snippet allows me to include emoji spans within a DIV. $('body').on('click', '.selectable-icons', function(e) { if (e.target.tagName.toLowerCase( ...

Create a Bootstrap jumbotron that is centered and only half of the width

I have a unique password reset method here: Jumbotron-Form-Bootstrap-My-Attempt Displayed below is the code from the image above: <div class="container"> <div class="jumbotron"> <br><br> <h2>Forget Passwo ...

Using box-shadow with table rows

I am encountering an issue trying to add a box-shadow to tr elements within a table. The problem arises when the box-shadow does not display unless all the tr elements are set with a display property of block, as suggested in this workaround: Box Shadow in ...

Explore the possibility of utilizing Excel VBA to locate images from websites and seamlessly import them into

Right now, my main goal is to browse an open webpage in search of multiple png images and then import them into various cells within a tab on my Excel workbook. The current macro I have takes me through the webpage where I can see which pictures are displ ...

Using Javascript to extract data from the <pre> tag and store it into an array

Our report pages are set up to display information line by line at the bottom by appending a <pre> tag. For example: <pre> Site Report Info Any errors will appear as numbers: 938109283091238109281092 Account ID will be shown here. Acc ...

Send your data to Node.js in tabular form

I am facing an issue with sending an editable table to my Node.js server. The response I am getting is "undefined". How can I resolve this problem? All the elements of my form are being parsed successfully, except for the table. The server logs the follo ...

Is it possible to navigate to an HTML element in the template of a different component?

One of my components contains a navigation bar with a function that allows users to scroll to a specific element on the page. Here is the template for the Navbar: <a class="nav-link" (click)="scroll(services)">Services</a> The code for the N ...

Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML For example: +--------+---------------------------------------------+--+ | Global | Region Country Currency Account Type Entity | | +--------+---------------------------------------------+ ...

Flex CSS pseudo-classes: a deep dive into styling with flex

Are pseudo-classes supported by Flex CSS selectors? I am looking to change the backgroundColor of a canvas based on mouse over and out. Currently, I am listening to MOUSE_OVER and MOUSE_OUT events and adjusting the styleName property in the handler functi ...

Conceal the div upon clicking outside its boundaries

CSS #apDiv1 { position:absolute; left:863px; top:201px; width:59px; height:47px; z-index:1; } #btftopbar { height:30px; width:auto; background: #005094 url('..'); backg ...

Navigating through pages in React using Pagination Animations

Attempting to style an active button with a small transition when it receives that attribute has been a challenge. The same issue occurs with the paragraph rendered from the data file. function Pagination() { const [selected, setSelected] = useState(0) ...

Why isn't the parent div stretching alongside its child divs?

Take a look at this example: wthdesign.net/website/olaf&co/index.php I am currently working on creating a responsive layout, but I am struggling to figure out how to make the "#content" div stretch with its child div when there is more content than ex ...

Creating a Footer with React and Material-UI: Step-by-step Tutorial

I'm facing an issue with the footer on my webpage. Here are my requirements: It should always be positioned at the bottom after the page content If there isn't enough content to fill the page, it should still stick to the bottom of the screen I ...

Steps for implementing a click event for a navigation drop-down using an HTML helper class

In my MVC 5 application, I have implemented a navigation dropdown. Here is the code snippet: <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu> Report ...

I've noticed that tailwindcss is causing issues with some of the styles in my angular project

Recently, I integrated tailwindcss 2.0.4 into my angular 11.2.6 project. After completing the installation and adding necessary imports, the appearance of the page had changed. Take this button for instance: https://i.sstatic.net/vvYVN.png Prior to int ...