What is the best way to position a rowspan column at the top of a row on mobile devices?

I have a table that needs to be optimized for mobile screens.

https://i.sstatic.net/61GPr.png

The goal is to rearrange the columns on mobile screens to save space, like in the example below:

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

What's the best way to achieve this?

Here is the current code snippet:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
...

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>
                ...
            </th>
            ...
        </tr>
    </thead>
            <tbody>
            ...      
           </tbody>
        </table>
</section>

Any suggestions on how to achieve the desired layout on mobile?

javascripthtmlcsshtml-table

Answer №1

After conducting a brief search, it appears that manipulating the rowspan and colspan attributes through css is not possible. While the solution provided may suit your current needs, I suggest considering an alternative layout approach. Using tables for layout purposes is outdated and can lead to complications. Perhaps exploring options like flexbox or grid might better align with your goals. Cheers!

html change:

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th class='extra--col'></th>
            <th></th>
            <th>
                <div class="ui-widget text-left">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search" />
                </div>
            </th>
            <th>
                <div class="ui-widget">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search2" />
                </div>
               
            </th>
        </tr>
    </thead>
            <tbody>
               <tr>
                <th class="header header--desktop" rowspan='4'>BASIC</th>
                <th class="header header--mobile" colspan='4'>BASIC</th>
              </tr>
            <tr>
<!--                 <th class="header" rowspan="4">BASIC</th> -->
                <td class="spec">Capacity</td>
                <td data-label="" class="value">20GB</td>
                <td data-label="" class="value">20GB</td>
            </tr>
             <tr>
                <td class="spec">Name</td>
                <td data-label="" class="value">Product 1</td>
               <td data-label="" class="value">Product 2</td>
            </tr>
            <tr>
              <td class="spec">Category</td>
              <td data-label="" class="value">TV</td>
              <td data-label="" class="value">TV2</td>
            </tr>
           </tbody>
        </table>
</section>

css :


/* new styles */

.header--mobile{
  display: none;
}

@media only screen and (max-width: 600px) {
  .header--mobile{
    display: table-cell;
  }
  .header--desktop,
  .extra--col{
    display: none;
  }
}

Update: The necessary edits have been implemented based on the changes.

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

Utilizing asynchronous components within a Vue.js component using an Axios request

I am currently developing a small application using VueJS, and I have an API that provides information about the components needed for rendering the page. The setup of vue-router looks like this: import Vue from 'vue'; import VueRouter from &ap ...

javascriptvue.jsvuejs2vue-component

Tips for aligning a div in the main section with a sidebar presence

Is there a way to center the loading spinner on my page while it's still loading data? I currently have a sidebar with buttons and a main content section. Right now, I've been adjusting the position of the spinner manually by using margin-left: q ...

htmlcss

Traversing hrefs inside list elements with Python Selenium

When parsing a webpage with an organization structure like the one below: <nav class="sidebar-main"> <div class="sidebar">Found 3 targets</div> <ul><li><a href="#target1" class="current"><span>target1& ...

pythonhtmlseleniumweb-scraping

Updating a field based on user input is a common operation in software development. Learn how

Below is the code used to create a field: <tr><td> <input type="text" value="good" onfocus="if (this.value == 'good') {this.value=''}" onblur="if(this.value == '') { this.value='good'}" name="name" m ...

javascriptjquery

How can I troubleshoot the overflow-y problem in a tab modal from w3 school?

https://www.example.com/code-sample overflow: scroll; overflow-y: scroll; When I type a lot of words, they become hidden so I need to use overflow-y=scroll. Despite trying both overflow: scroll; and overflow-y: scroll;, I have been unable to achieve the ...

javascripthtmlcss

What steps should I follow to ensure my slider keeps looping?

I have created a slider using a ul list that contains 15 li elements. The slider displays groups of 5 elements at a time. However, after clicking the next or previous buttons three times, it stops displaying any new elements. This is because I used right: ...

javascriptjqueryhtmlcss

Assign a variable the source of the web subsurface A-frame setting

I want to utilize the websurface A-frame component () to change the URL of the websurface when a button is clicked. I have defined a variable called source and I want the websurface URL to be updated to the value of this variable upon clicking the button. ...

javascriptthree.jsaframewebvr

What is the process of accessing a Key-Value object in Java through a query?

If I have a list of strings, how can I search for all values in a key-value object using my list of strings, and then return the corresponding keys? "listOfStrings": ["4444", "5555"] "secretCodes": [ { "secre ...

javascriptarraysjsonlist

Executing ESM-Enabled Script in Forever

Is it possible to execute a script using the option -r esm in Forever? When I try to run the configuration below, I encounter an error message that reads: Unexpected token import. Here is the configuration: { "uid": "app", "script": "index.js", "s ...

javascriptnode.jsimportmoduleforever

Steps for dynamically changing the class of a dropdown when an option is selected:

Check out this code snippet : <select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)"> <option class="dd-select" value="SELECT">SELECT</option> <option class="dd-ok" value= ...

javascriptjqueryhtml

Using TypeScript arrow function parentheses in the filter function

If I have an array of movie objects like this: const movies: Movie[] = [ movie1, movie2, movie3, movie4 ]; And if I want to remove a specific movie from the array, such as movie2, I can use the following code: movies = movies.filter( m => m !== ...

javascripttypescriptfilter

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Is there a way to determine the number of occurrences of the 'value' key within an object that is part of an array, and then add the count to each value if applicable? In this case, 'a' represents the original data var a = [ { id: ...

javascriptreactjsvue.jslodashunderscore.js

Help with dynamically updating page content using JSON

As I work on enhancing my website, I am focused on making the recipes pages dynamic. I have set up a JSON test database and developed a JS file that retrieves values from the JSON file to display them within appropriate divs on the page. My goal is to ena ...

javascriptjqueryhtmljson

Injecting variables into HSL color values within Three.JS

In my current code, I have set 2 HSL colors: scene.background = new THREE.Color("hsl(0, 100%, 50%)"); var light = new THREE.AmbientLight("hsl(180, 100%, 50%)"); I am attempting to pass a variable for 'hue' from my CSS. After ...

javascriptcolorsthree.jshsl

Is it possible to programmatically click a plotly mode bar button using JavaScript in a Shiny app?

After some research, I've discovered that in order to achieve my goal, I need to incorporate shinyjs and extendShinyjs. Here's what I have implemented so far: In the ui.R file, outside of the ui function: js_reset_axes <- "shinyjs.reset_axes ...

javascriptrshinyshinyjs

The Jquery keyup event does not fire unless it is within the document ready function

After writing the keyup event in an external JavaScript file and referencing it in the HTML file, I noticed something strange. $('input[name=restaurant]').keyup(function(event){ console.log("keyup"); }); The event wouldn't act ...

javascriptjquerykeyup

The Enchanted URL Folder Name

Spent two painstaking hours dealing with this issue. It's incredibly frustrating. Struggling to load css files in PHP pages when the URL contains a folder named "adsq" Comparing two identical pages, only differing in the folder name: One works perf ...

phpcssdirectory

Encountering Server Error 500 while trying to deploy NodeJS Express application on GCP App Engine

My goal is to deploy a NodeJS app on gcloud that hosts my express api. Whenever I run npm start locally, I receive the following message: >npm start > [email protected] start E:\My_Project\My_API > node index.js Running API on por ...

javascriptnode.jsexpress

Struggling with integrating jQuery and .php within a Wordpress environment

My goal is to create a user-friendly translation site at . To achieve this, I have developed a simple PHP code that utilizes an external translation API through the use of GET requests. The code functions correctly as shown below: <?php if(!empty($_GET ...

javascriptphpjquerywordpressget