What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices.

This is the design I am aiming for:

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

htmlcsstwitter-bootstrap-3

Answer №1

To display your code in two different tables, you can use CSS classes .hidden-xs and .visible-xs for showing and hiding content in responsive and non-responsive views.

Here's an example of the code. You can also view it on jsfiddle

<!--Non-Mobile-->
<table class="table table-bordered table-hover hidden-xs">
  <thead>
    <tr>
      <td>DOMAIN</td>
      <td>USER</td>
      <td>ACCT</td>
      <td>STATUS</td>
      <td>ACTIONS</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>domain1.co</td>
      <td>user1</td>
      <td>123456</td>
      <td>active</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>domain2.co</td>
      <td>user1</td>
      <td>654321</td>
      <td>active</td>
      <td>edit</td>
    </tr>
  </tbody>
</table>

<!--Responsive-->
<table class="table table-bordered table-hover visible-xs">
  <tr>
    <td>DOMAIN</td>
  </tr>
  <tr>
    <td>domain1.co</td>
  </tr>
  <tr>
    <td>USER</td>
  </tr>
  <tr>
    <td>user1</td>
  </tr>
  <tr>
    <td>ACCT</td>
  </tr>
  <tr>
    <td>123456</td>
  </tr>
  <tr>
    <td>STATUS</td>
  </tr>
  <tr>
    <td>active</td>
  </tr>
  <tr>
    <td>ACTIONS</td>
  </tr>
  <tr>
    <td>edit</td>
  </tr>
</table>
<table class="table table-bordered table-hover visible-xs">
  <tr>
    <td>DOMAIN</td>
  </tr>
  <tr>
    <td>domain2.co</td>
  </tr>
  <tr>
    <td>USER</td>
  </tr>
  <tr>
    <td>user1</td>
  </tr>
  <tr>
    <td>ACCT</td>
  </tr>
  <tr>
    <td>654321</td>
  </tr>
  <tr>
    <td>STATUS</td>
  </tr>
  <tr>
    <td>active</td>
  </tr>
  <tr>
    <td>ACTIONS</td>
  </tr>
  <tr>
    <td>edit</td>
  </tr>
</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 adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

javascripthtmlprintingwinjswindows-8.1

The label element in a CSS form is not displaying correctly

After clicking submit on the form located at this link: I am experiencing an issue where the validation messages are not displaying as intended. I would like them to appear next to the input elements, inline with the form. I suspect that there may be a p ...

css

Implementing AngularJS to display different divs according to the selected value

I am attempting to utilize the value of an HTML select element to toggle the visibility of specific div tags using AngularJS. Below is the code snippet I have been working with: <body ng-app="kiosk" id="ng-app" > <div class="page" ng-controll ...

javascripthtmlangularjshtml-selectng-show

What is the purpose of using overflow:hidden; in our code?

I am curious about the rationale behind using these three properties on this menu. I don't quite understand why they are necessary. I am eager to delve into the technical reasoning behind this. margin: 0; padding: 0; overflow: hidden; Snippet of HTM ...

htmlcss

Issue with Bootstrap modal not displaying in the center as expected

screenshot of the page Hey there, I'm struggling to understand why this modal is displaying incorrectly. I copied the code from the bootstrap website. Here it is: <button type="button" class="btn btn-info btn-lg" (click)="showPerformedActivityMod ...

htmlmodal-dialogbootstrap-4bootstrap-modal

Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected. https://i.sstatic.net/yXnwA.jpg LIMITED FUNCTIONALITY ON CERTAIN BROWSERS: Currently, the X button for closing the modal works o ...

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Determine if a file input is linked in React.js Material UI

Currently, I am working with a Material UI <TextField /> component that has a type=file prop to allow file attachments. My goal is to trigger an event when a file is attached to this TextField. However, my search results only provided JQuery soluti ...

javascripthtmlreactjsinputmaterial-ui

Identifying the Nearest Div Id to the Clicked Element

When a link is clicked, I am trying to locate the nearest div element that has an id. In this specific scenario, the target divs would be either #Inputs or #Stages. For example, if Page1 through 4 is clicked, I want to store the id #Inputs in a variable. ...

javascriptjqueryhtml

CSS - Retain z-index until the transition is complete

Looking at this basic grid layout: <html> <head> <style> .grid { display: grid; grid-gap: 5px; grid-template-columns: repeat(13, 3fr); } .box { position: relat ...

htmlcss

Can the height of an input element be set to zero?

Currently, I am utilizing CSS transitions to adjust the height of an input element from 40px to 0px in an attempt to make it disappear. While this technique works effectively for images and yields a satisfactory result, it seems to fall short when applied ...

htmlcsscss-animationscss-transitions

An HTML attribute that functions like autofocus in the select tag

Is there a way to set the default focus on a select tag in HTML, similar to how autoFocus works for textboxes? I am looking to make a select tag automatically focused when the page loads. Is there a method to achieve this? ...

html

Chrome browser alignment problems

Here are the lines in my code: <TD id=“avail_1” style=“display:none;availability:hidden”>UrgentAvail</TD> <TD id=“avail1_1” style=“display:none;availability:hidden”>substitutedBy</TD> When I test the application o ...

htmlcssjsp

What is the best way to create a Google-like style for the HTML <option> tag?

Can anyone demonstrate how to create fields for birthday and gender like the ones on the gmail sign up page? Your help is appreciated. Thank you! ...

htmltagsstyles

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

htmlcssbootstrap-4internet-explorer-11

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

cssnext.jstailwind-cssnext-images

Uncover a section of text from HTML using the Beautiful Soup module

I have an HTML snippet like this: <span id="lbldiv" class="lbl" style="color:Blue;"> Division : First; Grand Total: 3861; Grand Max Total: 4600 </span> By using the get_text method on the span element, I can extract the text: Division : ...

pythonhtmlbeautifulsoup

The Fixed Navbar is causing sections to be slightly off from their intended positions

Utilizing a bootstrap navigation menu on my website with a fixed position. When clicking a menu item, it takes me to the designated section but slightly above the desired position. How can I ensure that it goes to the exact position upon clicking the men ...

javascripthtmlangularbootstrap-4bootstrap-5

I am trying to connect HTML input with Python but I am not sure how to do it

As part of our capstone course team project, we are developing a self-hosted calendar app specifically designed for college students. One of our team members has taken the initiative to create HTML webpages for this self-hosted server. My current task is t ...

pythonhtml

A cutting-edge JQuery UI slider brought to life using HTML5's data-* attributes and CSS class styling

I've been attempting to create multiple sliders using a shared CSS class and HTML5 data attributes, but unfortunately, I haven't had much success so far. Although I am able to retrieve some values, there are certain ones that simply aren't w ...

javascriptjqueryhtmljquery-uijquery-ui-slider