Responsive solution for a table with a side header

Seeking recommendations for improving the responsiveness and swipe functionality of this table on mobile devices. Considering using Angular ng-swipe, but first need to make the table display in a card-view format. Any suggestions on how to structure this table for mobile view?

Example Table

<table class="table table-striped">
                    <tbody>
                        <tr>
                            <th>Job title</th>
                            <td>Web Developer</td>
                            <td>Java Developer</td>
                            <td>Sales Excutive</td>
                            <td>Project Manager</td>
                        </tr>
                        <tr>
                            <th>Salary</th>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                        </tr>
                        <tr>
                            <th>Job Type</th>
                            <td>Permanent</td>
                            <td>Contract</td>
                            <td>Permanent</td>
                            <td>Permanent</td>
                        </tr>
                        <tr>
                            <th>Location</th>
                            <td>Central London</td>
                            <td>London, Victoria</td>
                            <td>Bracknell</td>
                            <td>Central London</td>
                        </tr>
                    </tbody>
                </table>
htmlcssangularjshtml-table

Answer №1

To implement this solution, follow these steps:

@media (max-width: 768px) {
  .wrap {
    overflow: auto;
  }
  .wrap table {
    width: 768px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="wrap">
  <table class="table table-striped">
    <tbody>
      <tr>
        <th>Job title</th>
        <td>Web Developer</td>
        <td>Java Developer</td>
        <td>Sales Excutive</td>
        <td>Project Manager</td>
      </tr>
      <tr>
        <th>Salary</th>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
      </tr>
      <tr>
        <th>Job Type</th>
        <td>Permanent</td>
        <td>Contract</td>
        <td>Permanent</td>
        <td>Permanent</td>
      </tr>
      <tr>
        <th>Location</th>
        <td>Central London</td>
        <td>London, Victoria</td>
        <td>Bracknell</td>
        <td>Central London</td>
      </tr>
    </tbody>
  </table>
</div>

Answer №2

I have transformed the table layout into a tiled design for smaller screens.

VIEW DEMO ON JSFIDDLE

Try resizing the window to see the visual transformation.

CSS Styling:

.Lbl{display:none;}

@media all and (max-width:750px){
    table.table{
        border-collapse:separate !important;
        border-spacing:0 10px !important;
    }
    .table thead,
    .table th{
        display:none;
    }
    .Lbl{
        display:inline-block;
        float:left;
        height:100%;
        width:35%;
        padding-right:10px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .table td{
        clear:left;
        float:left;
        height:auto;
        min-height:30px;
        width:100% !important;
        background:#EEE;
    }
    .table tbody > tr td{
        border-left:1px solid #DDD;
        border-right:1px solid #DDD;
    }
    .table tbody > tr td:first-of-type{
        border-top:1px solid #DDD;
    }
    .table tbody > tr td:last-of-type{
        border-bottom:1px solid #DDD;
    }
    .table tbody > tr:hover{
        background:rgba(16,107,186,0.2);
    }
    .table tbody > tr:hover td,
    .table tbody > tr:hover .Col,
    .table tbody > tr:hover .Col2{
        border-left:1px solid #70AADD;
        border-right:1px solid #70AADD;
    }
    .table tbody > tr:hover td:first-of-type{
        border-top:1px solid #70AADD;
    }
    .table tbody > tr:hover td:last-of-type{
        border-bottom:1px solid #70AADD;
    }
}

HTML Structure:

<table class="table table-striped">
    <thead>
        <th>Job title</th>
        <th>Salary</th>
        <th>Job Type</th>
        <th>Location</th>
    </thead>
    <tbody>
        <tr>            
            <td><div class="Lbl">Job title</div>Web Developer</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>Central London</td>
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Java Developer</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>London, Victoria</td>            
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Sales Excutive</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>  
            <td><div class="Lbl">Job Type</div>Contract</td>            
            <td><div class="Lbl">Location</div>Bracknell</td>                          
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Project Manager</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>Central London</td>
        </tr>
    </tbody>
</table>

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

I'm running into an issue where I am unable to retrieve a variable from a separate

Struggling to populate a dropdown menu as I keep encountering an undefined error for all currencies when trying to reference them. A third party provided me with this code to simply fill the dropdown and make some text edits, but I'm puzzled as to wh ...

javascripthtml

What could be causing the malfunction of BS4 Scrollspy?

I'm having trouble with implementing Bootstrap 4's Scrollspy feature. Despite going through the BS4 documentation and watching a Scrollspy tutorial on YouTube, I still can't seem to get it to work properly. Currently, I am using a CDN for BS ...

htmlcsstwitter-bootstrapbootstrap-4

Accessing a variable from another HTML using JavaScript

I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...

javascripthtml

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

javajavascriptjqueryhtmlapplet

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...

javascriptcssreactjsanimation

Tips for arranging elements in a customized manner using Bootstrap

Is it possible to reorder columns between desktop and mobile in Bootstrap 5 like the example shown in this image? https://i.sstatic.net/I74PF.jpg I have explored using the order classes and experimented with position: absolute, but I haven't been ab ...

csstwitter-bootstrapbootstrap-5

Integrating JSON back into the system

As I work with Axios to retrieve information from an API, I am able to successfully connect and receive an object with the necessary data. However, I am struggling to display this JSON data in my HTML code. Here is the code snippet I am using: <body&g ...

javascripthtmljsonaxios

Inquire about understanding Mean.js through form submission

Hey there, I'm looking to create a search engine for an application using JS MEAN. I have a database with various elements and I want users to fill out a form to see the results in a separate view. I haven't had much luck so far, I've don ...

javascriptangularjsmongodbexpressmeanjs

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

I'm curious about why I'm receiving the error "Unable to bind to 'ngFor' since it is not recognized as a property of 'li'. Can someone please explain why this is happening?

The issue is related to the *ngFor directive for nonvegfoodlist app.component.ts import { Component } from '@angular/core'; export class Menu { id : number; name :string; } const veg : Menu[] = [ { id:1 , name:'Rice'}, { id: ...

javascripthtmlangular

step-by-step guide for implementing Firebase JavaScript simple login in Cordova

Having an issue with the integration of Angular Firebase JavaScript simple login in Cordova. This problem only occurs when testing on cordova emulate android User clicks on Google login button Redirected to Google login page After submitting the login f ...

angularjscordovafirebaseangularfireionic-framework

I am experiencing an issue with setting the border to none using .navbar-toggler

I'm currently utilizing bootstrap 5, and I've encountered an issue with setting the border and outline to none in my CSS file. Specifically, when I apply these properties to the nav-toggler class, it seems to have no effect. .menu-bar .navbar- ...

htmljquerycssbootstrap-5

Navigating the integration of internal Bootsrap 5.2 with Laravel 7

Hi there, I am new to the Laravel framework and I am attempting to link my Bootstrap v5.2 with my Laravel v7 project. However, I seem to be having trouble connecting the two. I have stored the CSS and JS folders within a "bootstrap" folder at the same leve ...

javascriptphpcsslaravelbootstrap-5

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

When the URL is modified, triggering an event to load

Is there a way to make a page load directly to a specific section and automatically open an accordion? For instance, I have a page with multiple accordions displayed vertically. I already know that using id's in the URL like page#accordion1 will scro ...

javascriptjqueryhtmlurlaccordion

Ensuring proper functionality of JQModal when displayed above an iframe with the usage of ?wmode=

Here's an interesting one... I'm currently working on a site with JQModal and everything seems to be functioning properly except for the fact that the iframe appears on top of the modal. An easy fix is to append ?wmode=opaque at the end of the ...

javascripthtmliframejqmodal

Issue with displaying Font Awesome icons in Bootstrap 4 navbar brand

Recently, I've been setting up a local Laravel website to explore the latest features and changes in Laravel 5.6. However, I've encountered an issue while trying to integrate a Font Awesome icon into the navbar-brand of Bootstrap 4. The icon does ...

cssbootstrap-4font-awesome

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

htmlcss

Personalized button utilizing Bootstrap 4

Seeking assistance to create a button with a 3D effect. I want to mimic the appearance of this button: https://i.sstatic.net/9sFs5.png Currently using Bootstrap to generate a button using this code: <button type="button" class="btn btn-primary">Gam ...

htmlcssbootstrap-4