Revamp the table layout for mobile with a unified markup structure

Question

Revamp the table layout for mobile with a unified markup structure

I want to customize the display of my bootstrap table for mobile view. Each row entry should be shown in a separate box or card, similar to the following examples:

First: Mark
Last : Otto
Handle: @mdo

Second card-

First:Jacob
Last:Thornton
Handle:@fat

Is there a way to achieve this without creating additional HTML specifically for mobile view? I am using Bootstrap 4.

<table class="table">
  <thead>
    <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>
  </tbody>
</table>

javascript bootstrap-4

Answer 1

Answer №1

You have the ability to customize each element to your preferred look. Remember that you can only add static information or incorporate it as an attribute within an element. In this case, I have added the col attribute to each td element as an example:

document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}

.cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;

  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
}

<button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <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 col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>

Q: How can I adjust the space between the heading and data in the flex view?
A: You can increase the padding on the right side of the ::before element.

document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}

.cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;

  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
  padding-right: 100px;
}

<button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <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 col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>

Answer 2

You have the ability to customize each element to your preferred look. Remember that you can only add static information or incorporate it as an attribute within an element. In this case, I have added the col attribute to each td element as an example:

document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}

.cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;

  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
}

<button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <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 col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>

Q: How can I adjust the space between the heading and data in the flex view?
A: You can increase the padding on the right side of the ::before element.

document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}

.cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;

  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
  padding-right: 100px;
}

<button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <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 col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>

Revamp the table layout for mobile with a unified markup structure

Answer №1

Similar questions

What is the mechanism behind lazy module loading in typescript?

Preventing the display of any object items that include a period character in AngularJS

jQuery and Bootstrap collide

The presence of the !doctype html tag completely messes up my

Reorder an array of objects in JavaScript alphabetically, taking into account any possible null values

Reactjs is failing to display the page

The Add/Remove button functionality is not functioning as expected for duplicated form fields when using jQuery

Use a swipe gesture to move through the slideshow on a touchscreen device

Perform calculations for product and sum when button is clicked

Guide on using JavaScript to automatically scroll a HTML page to the top on any mobile browser

The length function appears to be signaling an unanticipated error

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Navigation menu with submenus containing buttons

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

An unexpected 'undefined' value is being added to a particular Web API request

Is it possible to trigger an event in Laravel prior to the expiration of a user's login session?

Creating visually appealing tables in React.js

Transfer numerical values from PHP to JavaScript using individual files

How can I utilize npm with the original source code instead of minified or bundled code?

Invoking a function passed via props that utilizes react-router's features