How can I alter the display of table rows and columns using responsive design techniques?

Currently utilizing bootstrap, I have a drinks menu displayed in the following layout when viewed in Firefox.

The mobile view of this menu is functioning properly. However, I am encountering issues with the desktop view as the columns are not aligning correctly in a row.

Shown below is the mobile/current view:

https://i.sstatic.net/9jtX0.png

My desired outcome is illustrated in the image below (although the last element does not line up perfectly yet, the concept is there);

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

Here is my current code (tr/td tags are assumed for simplicity):

<div class="row justify-content-center pt-5 mt-5 mb-5 pb-5">
 <div class="col-auto">
   <table class="table-responsive">

    <!-- Red -->
    <tbody>
    <!-- drinks items -->
    </tbody>

    <!-- White -->
    <tbody>
    <!-- drinks items -->
    </tbody>

   </table>
 </div>
</div>
htmlcssbootstrap-5

Answer №1

To create a responsive layout for displaying categories and items, consider using a grid layout within tables to allow wrapping without disrupting the structure. Setting a minimum width for the cells can further enhance the design.

One possible approach is to utilize grid and auto-fill features for better responsiveness (resources provided below for more details).

h1 {
  border-bottom: double;
  margin: 1em 15%;
  text-align: center;
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  align-items: center;
  gap: 2em
}

table {
  margin: auto;
  min-width: 20em;
  background: lightgray;
}

caption {
  text-align: start;
  font-weight: bold;
  font-size: 1.4em;
}

td:last-of-type {
  width: 5em;
  background: #bee;
}
<h1>Menu</h1>
<div>
  <table>
    <caption>Category</caption>
    <tr>
      <td>Item</td>
      <td>Price </td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Price </td>
    </tr>
    <!-- More items would go here -->
  </table>
</div>

Resources:

An alternative version using your markup, Bootstrap, and custom classes (using flex instead of grid for different behavior)

h1 {
  border-bottom: double;
  margin: 1em 15%;
  text-align: center;
}
table {
  gap: 2em;
}
.d-table {
  display: table;
}
tbody:before {
  caption-side: top;
  content: attr(data-caption);
  display: table-caption;
  text-align: start;
  font-weight: bold;
  font-size: 1.4em;
}
td {
  width: 15em;
}
td:last-of-type {
  width: 5em;
  background: #bee; /*demo purpose*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row justify-content-center pt-5 mt-5 mb-5 pb-5">
  <div class="col-auto m-auto">
    
    <h1>Menu</h1>
    <table class="d-flex flex-wrap justify-content-center align-items-center">
      <tbody data-caption="Category" class="d-table">
        <tr>
          <td>Item</td>
          <td>Price </td>
        </tr>
        <!-- Additional items would be placed here -->
      </tbody>
    </table>
  </div>
</div>

Answer №2

To ensure it is adaptable to different screen sizes, consider utilizing @media screen and (min-width: 800px) in your CSS code. For additional information, you can refer to this link.

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

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

javascriptjqueryhtmlcsswordpress

Elevate a division within its container

Is there a way to make a smaller div positioned at the top when it's placed next to a larger one in the same container? I'm looking for a solution that doesn't involve using position-relative and manually adjusting the placement. Take a loo ...

htmlcss

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

I have a unique script that allows me to open links randomly, but now I want to create a new script that opens links sequentially and goes back to the initial one. For example, clicking a button will open link1, then clicking it again will open link2, an ...

javascripthtmlweb

Encountering a "List.name='List' error" during the Gatsby build process

https://i.sstatic.net/0elLW.png I have been experiencing constant failure with gatsby build on this specific line List.name='List' related to reactstrap. Despite trying various solutions, I have not been able to resolve the issue. - reactstrap ...

reactjsgatsbybootstrap-5netlifyreactstrap

JavaScript Object has Not Been Defined

Currently, I am developing a small program for myself related to a video game. The main issue I am facing is that certain objects are being flagged as not defined when the errors appear on the page. $(document).ready(function(){ //A list of chara ...

javascriptjqueryhtmlarraysobject

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted: Adding "text-align: justified" to the CSS right after the YAML Header: <style> body { text-align: justify ...

htmlcssr-markdownbookdowngitbook

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles

What is the best way to give an element or container a variable width rather than a fixed width?

I have a query regarding positioning and variable width. I've applied the following CSS: *{ border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/ } By adding this to all elements, I can visualize their p ...

csshtmlwidthcss-position

Retrieve the checkbox value and assign it to an object in the $scope of an Angular

As a newcomer to angularjs, I've been struggling with this code snippet for the past two days. My goal is to retrieve values from selected checkboxes within my angular js controller. I have experimented with both ng-true-value and ng-false-value, bu ...

htmlasp.netangularjscheckboxangularjs-scope

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Tips for combining a select option and search field into a seamless integrated feature

I'm looking to implement a search field in my project that includes the ability to select specific parameters before running the search. I want it to have a seamless design similar to the image shown below. https://i.sstatic.net/niWP8.png Although I ...

javascripthtmlcssreactjsmaterial-ui

Styles for Django Rest Framework admin interface are not displaying correctly

Has anyone else experienced an issue with the styling in their Django admin panel? The CSS appears to be functioning properly, but once you navigate to a specific model, the layout becomes distorted. I can't seem to figure out what could be causing th ...

pythoncssdjangodjango-rest-framework

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

javascripthtmlcsstinymcetinymce-4

How come my picture is clinging to the bottom of the container?

I am facing an issue where my "vertical rule" is sticking to the bottom of the container when placed to the right of the image. <div> <div style="display:inline-block; width:210px;"> <img src="res/img/PlayBtn.png" style="top:- ...

htmlcss

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen. Here is the ...

htmlcssbootstrap-4

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

javahtmlplayframework

Jquery form calculation not matching up

I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...

javascriptjqueryhtml

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

javascriptjqueryhtml

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Is col-sm the default class applied for large screens if col-lg and col-md are not specified? ...

javascriptjqueryhtmlcsstwitter-bootstrap

Reset the button is behaving in the same way as the submit button

I'm having an issue with the script below where the reset button is acting like a submit button as well. Can anyone help me troubleshoot this problem? Thank you. HTML <input type="image" name="submit" value=" " src="image.png"> <input t ...

htmlbuttonsubmitreset