various columns and rows within a responsive bootstrap table

My goal is to create a responsive table with 4 columns when the window size is larger than 600px, and switch to 2 columns for mobile view. I am using bootstrap framework to achieve this. Below is the structure of the table that I want to display:

-----------------------------
| th1  | th2  | th3  | th4  |
-----------------------------
| val1 | val2 | val3 | val4 |
-----------------------------
| th5  | th6  | th7  | th8  |
-----------------------------
| val5 | val6 | val7 | val8 |

In mobile view, I would like it to look like this:

--------------
| th1 | val1 |
---------------
| th2 | val2 | 
--------------
| th3 | val3 |
--------------
| th4 | val4 |
--------------
| th5 | val5 |
--------------
| th6 | val6 |
--------------
| th7 | val7 |
--------------
| th8 | val8 |

Currently, I have the following code snippet for the table:

<table class="table table-bordered table-striped">
    <tbody class="center">
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
            <th>th4</th>
        </tr>
        <tr>
            <td>val1</td>
            <td>val2</td>
            <td>val3</td>
            <td>val4</td>
        </tr>
        <tr>
            <th>th5</th>
            <th>th6</th>
            <th>th7</th>
            <th>th8</th>
        </tr>
        <tr>
            <td>val5</td>
            <td>val6</td>
            <td>val7</td>
            <td>val8</td>
        </tr>
    </tbody>
</table>
htmlcssbootstrap-4

Answer №1

Consider using data-th attribute

<table class="table table-bordered table-striped" id="customDataTable">
<thead>
<tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
</tr>
</thead>
<tbody class="center">
<tr>
    <td data-th="Header 1">Value 1</td>
    <td data-th="Header 2">Value 2</td>
    <td data-th="Header 3">Value 3</td>
    <td data-th="Header 4">Value 4</td>
</tr>
<tr>
    <td data-th="Header 1">Value 5</td>
    <td data-th="Header 2">Value 6</td>
    <td data-th="Header 3">Value 7</td>
    <td data-th="Header 4">Value 8</td>
</tr>

</tbody>


@media screen and (max-width: 600px) {
        table#customDataTable caption {
            background-image: none;
        }
    
        table#customDataTable thead {
            display: none;
        }
    
        table#customDataTable tbody td {
            display: block;
            padding: .6rem;
        }
    
        table#customDataTable tbody tr td:first-child {
            background: #666;
            color: #fff;
        }
    
            table#customDataTable tbody tr td:first-child a {
                color: #fff;
            }
    
            table#customDataTable tbody tr td:first-child:before {
                color: rgb(225,181,71);
            }
    
        table#customDataTable tbody td:before {
            content: attr(data-th);
            font-weight: bold;
            display: inline-block;
            width: 10rem;
        }
    
        table#customDataTable tr th:last-child, table#customDataTable tr td:last-child {
            max-width: 100% !important;
            min-width: 100px !important;
            width: 100% !important;
        }
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-striped" id="customDataTable">
            <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
            </thead>
            <tbody class="center">
            <tr>
                <td data-th="Header 1">Value 1</td>
                <td data-th="Header 2">Value 2</td>
                <td data-th="Header 3">Value 3</td>
                <td data-th="Header 4">Value 4</td>
            </tr>
            <tr>
                <td data-th="Header 1">Value 5</td>
                <td data-th="Header 2">Value 6</td>
                <td data-th="Header 3">Value 7</td>
                <td data-th="Header 4">Value 8</td>
            </tr>
            
            </tbody>
        </table>

https://jsfiddle.net/lalji1051/oh0va43t/8/

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

Using transform to scale in Firefox animations does not function properly

I'm currently experimenting with a slider to apply the "transform: scale(x,x)" css3 animation specifically in Firefox. Interestingly, when I disable the animation, the slider and scaling functions properly. However, once I enable the animation, it ani ...

jqueryjquery-uicssfirefoxtransform

Try implementing transform translate with absolute coordinates when positioning elements on a webpage

If I wanted to create a box that moves along with the mouse cursor, I could achieve that using the code below. document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--mouse-x', e.clientX ...

javascripthtmlcss

A PHP script or regular expression that swaps the positions of characters within a string

(Update1: per suggestion by George Cummins) I need assistance in creating a regex search and replace or a php function to switch positions of characters within a string. (since I couldn't figure it out on my own) For example, if I have the following C ...

phpcssregex

Is it possible to transfer data from a JavaScript file to the Express server without relying on a form submission?

As a newcomer here, I apologize if I overlook any best practices. Currently, I am in the process of developing a sudoku game using express, JavaScript, HTML, and mongoDb. My current challenge involves setting up a statistics system. My goal is to send da ...

javascripthtmldatabaseexpressejs

Utilizing the power of jQuery validation and Select2, we can seamlessly display or conceal success and error messages, all while maintaining a sleek design with Bootstrap

This is an original question Previous inquiries regarding this topic are outdated, dating back 4-5 years and pertaining to earlier versions of the projects in question. Status Update For my current project, I am utilizing: Bootstrap version 4.4.1 jQue ...

jquerybootstrap-4jquery-validatejquery-select2

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

cssfont-awesomefont-awesome-5

Instructions on adjusting div size to fit images

Here's the scenario .headerpic { width:100%; background-image:URL("../images/layout/header.png"); background-size:cover; } The issue I'm facing is getting the height to adjust according to the image. I've attempted. height:100%; Unfortun ...

css

Tips for quickly navigating to filter results on a page using jquery

In order to display addresses of laboratories based on parameters such as regions and profile, I have utilized a clickable map and menu. (Visit the site for reference: ) The issue I am facing is how to ensure that when clicking on a region, it smoothly ju ...

jqueryhtmlhashfilterhref

Robot Framework HTML5 - WebDriver support - Although the WebDriver instance of the browser fails to login, it works successfully when the browser is opened manually

Robot Framework Version 2.8.3 Selenium2Library Version 1.4 I am encountering an issue related to the controls utilized in the application being tested. Instead of using ids for controls, like the traditional coding approach, my application has been desig ...

htmlcssselenium-webdriverrobotframework

Flexbox design - positioning elements flush against each other

I'm struggling with creating a layout for my react component, specifically aligning the images vertically. The current layout is influenced by the Audio component: https://i.sstatic.net/vjn4K.png My goal is to have both images aligned vertically like ...

htmlcssreactjs

Methods for inserting text into a WebBrowser Document without retrieving any Attributes in vb.net

Is it possible to retrieve text from a WebBrowser Document in vb.net without retrieving any attributes?! For example: <h1>text here</h1> Or: <h1 name="anything">text here</h1> How can I extract the "text here" within the <h1 ...

htmlvb.net

add the AJAX response to the specified div element

I'm currently using an ajax call to retrieve movie data from the IMDb API for 'The Shawshank Redemption'. My goal is to display this data within the designated div element. <div id="movie-data"></div> Here's my current Jav ...

javascriptjqueryhtmlajax

Is there a solution for iOS automatic hover adjustment?

Is there a way to create a jQuery plugin or JavaScript script that automatically loops through each CSS hover effect (from an external stylesheet) and binds it with a double tap event? Tap 1 - Triggers the CSS :hover effect Tap 2 - Acts as a click (follo ...

javascriptiphonecsshover

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

javascripthtml

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

javascriptjqueryhtmlcsspopupwindow

Issue with Bootstrap 'align-content-around' not functioning as expected

The align-content: space-around property does not seem to be working in this scenario. What is the solution? How can columns 3 and 4 be aligned to the bottom? .row { background: #f8f9fa; } .col { border: solid 1px red; padding: 10px; height: 20 ...

htmlcssflexboxbootstrap-4

Mega Dropdown Menu using CSS

I am currently working on a dynamic mega drop-down menu using only HTML and CSS. The issue I'm facing is that when I select one of the list items (LIs), it expands in size at the expense of the other LIs. I'm not sure where the problem lies, so ...

htmlcssmenu

Card Header with Bootstrap: <div class="card-heading card-heading-attention">

When attempting to use multiple bootstrap cards on a single page by simply copying and pasting the same code, I encountered an issue. My goal was to display two identical cards, but the second one was missing some design elements. Take a look at the code a ...

javascripthtmlbootstrap-4dashboardcard

Submitting an HTML form with no input data

Looking to dynamically pass arguments between pages using the code below: <script type="text/javascript> function buildAndSubmitForm(index){ <? $args = 't='.$team.'&s='.$season.'&l='.$league.&apo ...

phpjavascriptjqueryhtml