Creating a mobile-friendly table using Bootstrap 4 and CSS: A step-by-step guide

Looking to create a responsive table? I've got my table ready for desktop view, but now I want it to display properly on smartphones too.

Here's how my table looks on the website:

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

and here's the code I'm using:

main.html

<table class="table">
            <thead>
              <tr class="table-dark">
                <th></th>
                <th>Title</th>
                <th>Name2</th>
                <th>Name3</th>
                <th>Name4</th>
                <th>Name5</th>  
                <th>Name6</th>
                <th>Rating</th>
                <th>Button</th>  
              </tr>
            </thead>
            <tbody>   
              <tr>
                <td>
                    <img id="brandimg" alt="" src="">
                </td>
                <td><a href=""></a></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                </td>
                <td>
                    <button type="submit" class="btn btn-info">Add</button> 
                </td>
              </tr>
            </tbody>
          </table>

I need help making this table responsive for smartphones using Bootstrap 4 and CSS. Any tips?

htmlcssbootstrap-4

Answer №1

In my opinion, utilizing a grid layout is the most efficient method for creating a responsive table structure. Here is an example of how it can be implemented:

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  border: 1px solid #000;
}
.title {
  display: block;
  font-weight: 900;
  border-bottom: 1px solid #000;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #000;
}
.row > div {
  border: 1px solid #000;
}

@media screen and (max-width: 620px) {
  .table {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border: 1px solid #000;
  }
  .title {
    border-bottom: none;
  }
  .row > div {
    border: none;
    border: 1px solid #000;
  }
  .row {
    display: grid;
    grid-template-columns: 1fr;
  }
}
<div class="table">
  <div class="row">
    <div>
      <span class="title">title 1</span>
      Content
    </div>
    <div>
      <span class="title">title 2</span>
      Content
    </div>
    <div>
      <span class="title">title 3</span>
      Content
    </div>
  </div>
  <div class="row">
    <div>
      <span class="title">title 4</span>
      Content
    </div>
    <div>
      <span class="title">title 5</span>
      Content
    </div>
    <div>
      <span class="title">title 6</span>
      Content
    </div>
  </div>
</div>

Answer №2

Give this a try and adjust as needed.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container table-responsive py-5">
  <table class="table table-bordered table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</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

Encountering a broken image icon while attempting to the text alignment with an image in a React application

Working on a React app, I'm facing an issue aligning text with an image. Currently, it's showing a broken icon which makes me question if the path to the image is correct. Check out my file structure below.https://i.sstatic.net/zQ4Xd.png The ima ...

htmlreactjsimagebootstrap-4

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Turn off the div element until a radio button option is selected, then activate it

Is there a way to disable a div and then activate it only after selecting a radio button option? I know how to hide and show the div when an option is selected, but using the hidden property is not ideal. Can someone suggest a possible solution? <div ...

javascripthtmlangular

Scrollable panel feature in Flexbox

I am attempting to create a design that expands to fill the screen, but allows for scrolling when the content exceeds the available space. My current approach using basic flexbox, as suggested in this answer, successfully fills the screen. However, overfl ...

htmlcssflexbox

What is the best way to ensure that the background of wrapped text extends precisely to the pixel distance of the text?

Having a simple issue that I believed could easily be solved with modern CSS, but I'm now confused. I was aiming to have the background of a text parent span precisely across the width of its longest text line, evenly spreading on the sides, different ...

htmlcss

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

csshtml

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css

Fluid-width sidebars that don't require scrolling in a 3-column layout design (jsFiddle)

I need to design a layout with three columns, where the left column has a fixed width and the middle and right columns each take up 50% of the remaining space. It is also important that the left and right columns do not scroll along with the page. I have ...

cssfluid-layout

Create a personalized form with HTML and JQuery

Currently, the data is displayed on a page in the following format: AB123 | LHRLAX | J9 I7 C9 D9 A6 | -0655 0910 -------------------------------------------------------- CF1153 | LHRLAX | I7 J7 Z9 T9 V7 | -0910 1305 ---------------- ...

javascriptjqueryhtml

Align one item in the center with several other elements

I have a div containing multiple spans with varying widths. While I know that using text-align: center can center all content within the div, my goal is to specifically designate one span as the true center, rather than having the center be the average of ...

htmlcsscentering

Unraveling the enigmatic duality of self-closure with Bootstrap 4

In the small div element, I need to incorporate multiple tooltip functionalities. Furthermore, as this div has an "overflow: auto" attribute, Popper.js automatically ensures that the tooltips remain within the boundaries of the element. In such situation ...

javascriptbootstrap-4

Interactive input box featuring selectable suggestions

Hey, I'm looking to design an HTML input field with a suggestions menu. The desired effect is similar to the image provided below, where clicking on the input field triggers a dropdown menu to appear. I'm curious if there are any plugins or code ...

javascriptjqueryhtmlweb-deploymentfrontend

What could be causing the width issue with my vertical Bootstrap 4 menu items?

I am facing an issue with creating a menu. While I have managed to implement the old bootstrap, the new flexbox feature is proving to be confusing for me. Specifically, I want to have a dark vertical side menu that is 80px wide, with the rest of the screen ...

htmlcssflexboxbootstrap-4

jQuery: Manipulating and accessing DOM elements through attributes: querying and creating them

I have some inquiries regarding jQuery, specifically in relation to attributes: Is there a way to list or duplicate all attributes of a DOM element using a jQuery or DOM API call? Although the jQuery.attr() API allows this with known attribute names, is ...

javascriptjquerycssdomattributes

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this? this.cy = cytoscape({ con ...

cssangulartypescriptclasscytoscape.js

Triggering the click event three times on a dynamically generated element

I am currently facing a simple issue. I am attempting to implement a click event on dynamically generated elements such as this: $(document).ready(function(){ $('ul').on('click', 'li.clickable', function() { conso ...

javascriptjqueryhtml

Is there a way to utilize Material UI React Grid, which incorporates CSS Flexbox, in order to achieve a specific grid layout where items are wrapped and evenly spaced?

Currently, in my React project, I am incorporating Material UI React. I am working with the <Grid> component to create a flexbox layout with 10 items. I am facing some difficulties in achieving a perfect grid layout with evenly spaced items. The lay ...

cssreactjsflexboxgridmaterial-ui

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

htmlcss

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

When accessing $elem.style.display, it consistently returns an empty string

Currently working on a project with a website here: Looking for a solution to determine the visibility of the element #cookie-law-info-bar. Unfortunately, the usual is('visible') method is not functioning as expected in Chrome. Therefore, I am ...

jquerycssgoogle-chrome