Table design variation for desktop and mobile display

I'm new to this location and could really use some assistance. I'm trying to create a page that can be viewed on both desktop and mobile devices, featuring a table.

On desktop, the table displays as follows:

    th1     th2     th3
    td1-1   td1-2   td1-3
    td2-1   td2-2   td3-3

However, on mobile devices, I need the table's structure to change. I want the table headers on the left and the content on the right:

    th1  td1-1
    th2  td1-2
    th3  td1-3
    th1  td2-1
    th2  td2-2
    th3  td2-3

Unfortunately, I'm unable to post images due to lack of reputation. Can someone please lend a hand with this?

htmlcssmobiletablelayout

Answer №1

When designing a website, it's important to consider how the layout will appear on different screen sizes. Using media queries can help with this. One common approach is to have a table display in mobile mode when the screen is 500px or less, and in desktop mode otherwise.

Below is an example of how this can be implemented:

CSS

/*normal mode*/
#desk-table {
    display: block;
}
#phone-table {
    display: none;
}

/*mobile mode*/
@media only screen and (max-width: 500px) {
    #desk-table {
        display: none;
    }
    #phone-table {
        display: block;
    }
}

HTML

<table id="desk-table">
<tr>
    <td>th-1</td>
    <td>th-2</td>
    <td>th-3</td>
</tr>
<tr>
    <td>td1-1</td>
    <td>td2-1</td>
    <td>td3-1</td>
</tr>
<tr>
    <td>td1-2</td>
    <td>td2-2</td>
    <td>td3-2</td>
</tr>


<table id="phone-table">
<tr>
    <td>th-1</td>
    <td>td1-1</td>
</tr>
<tr>
    <td>td2-1</td>
    <td>td2-1</td>
</tr>
<tr>
    <td>th-3</td>
    <td>td3-1</td>
</tr>
    <tr>
    <td>th-1</td>
    <td>td1-2</td>
</tr>
<tr>
    <td>td2-1</td>
    <td>td2-2</td>
</tr>
<tr>
    <td>th-3</td>
    <td>td3-2</td>
</tr>

For more advanced responsive design options, consider using frameworks like:

These frameworks provide easy-to-use responsive layouts for your website.

Answer №2

When developing your website, remember to prioritize coding for desktop first by utilizing the specified attributes. Once that is done, proceed to create a separate version of the table structure tailored for mobile devices using media queries. The parent element for all mobile-related GUI should be defined as shown below; contain all your mobile-specific code within this element:

@media all and (max-width: 658px) {

 // Your Codes For Mobile

}

If you want to enhance your understanding of media queries, consider reading this informative resource:

Media Queries

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

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Upon loading my page, I aim to have some of the div elements hidden initially and display only one. Here is a script that accomplishes this goal: <script> $(document).ready(function () { $(".total").click(function () { $("#pi ...

javascriptjqueryhtmlcss

Using a comma as a decimal separator for input is not permitted when working with angular/typescript/html

I am facing an issue with my Angular frontend where I have numerous html input fields that trigger calculations upon typing. <input type="text" [(ngModel)]="myModel.myAttribute" (input)="calculate()"> The problem arise ...

htmlangulartypescriptlocalization

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

a pathway leading to the user's profile

I have successfully implemented a code that displays a list of people who are at level 8, which can be seen below https://i.sstatic.net/bJ9VX.png Now, I want to make it so that when a user clicks on the username of the individuals listed, they will be re ...

phphtml

Is it possible to extend the height of a floating child to match that of the parent element

Can CSS alone make this possible? The answer seems to elude me no matter where I look! I'm trying to create a left and right nav bar that extends to 100% height, essentially reaching the end of the page. There are three floated columns inside a float ...

htmlcss

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

javascripthtmlreactjsreact-hooksfrontend

What steps can be taken to fix the issue of an Undefined Index occurring while using ajax

Trying to set up a dependent combobox using Ajax, but encountering an error (Undefined index: faculty_id). No typos in the code, and the query works fine in SQLyog tests. Here's the Ajax code: $(document).ready(function(){ $('#faculty&apos ...

javascriptphpjqueryhtmlajax

Difficulty fetching css files on handlebars (express API)

Recently, I encountered an issue where the CSS styles were not being applied to my HBS code despite several attempts. The structure of my service is as follows: Service Controllers Models public css styles.css Routers Views index.hbs app.js pac ...

javascriptcssapiexpresshandlebars.js

What are some ways I can integrate my Json object into my IONIC app rather than relying on a hardcoded object?

I stumbled upon this IONIC app's services.js file and found an example using a hardcoded object called "employees." Instead of using the hardcoded object, I wanted to use a JSON file. However, my attempt to make this change did not work as expected. I ...

javascriptangularjsjsonionic-frameworkmobile

Dynamic Loading of CSS Styles

My style-sheet is saved in this unique location: /opt/lampp/htdocs/project/core/styles/Style.css To load the CSS file using the full directory, considering that the files utilizing it are situated here: /opt/lampp/htdocs/project/client/ The ultimate ob ...

javascriptphpjqueryhtmlcss

Vue.js having compatibility issues with Semantic UI dropdown feature

I have recently started exploring Vue.js and I must say, I really enjoy using Semantic UI for my projects. In Semantic UI, dropdowns need to be initialized using the dropdown() function in semantic.js. This function generates a visually appealing HTML str ...

javascripthtmldrop-down-menuvue.jssemantic-ui

Leveraging the power of Ajax in JavaScript

For my assignment, I successfully made two separate paragraphs hide and show using jQuery. Moving forward, the next step involves integrating JavaScript Ajax code to allow the paragraphs to toggle visibility. To achieve this, I created two distinct HTML fi ...

javascripthtmlajax

Customizing the full calendar_scheduler: Adjusting the minimum width of Resource columns in the vertical agenda day view for a horizontal scroll

Hey everyone, I'm facing an issue and could use some help! I am currently using the Scheduler in FullCalendar. As I add more resources, the columns for each resource become smaller in order to fit the calendar. However, I would like to set a minimum w ...

cssplugins

Disarrayed image in absolute position on my webpage

I have a website with an auto-resizing background, but I am struggling to have a fixed black bar at the bottom of the page. Everything looks good when the browser window is maximized, but as soon as you scale it down and start scrolling, the black bar alm ...

htmlxhtmlcss

jquery function context

I'm having trouble grasping function scope in this scenario. When a button is clicked, it triggers a dialog box with a textarea inside displaying a URL that can be copied for camera setup. <button id="axis-details" onclick="apikey('<?php e ...

javascriptjqueryhtmljquery-ui

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

Is there a way to insert phoneNo["phoneno"] into an HTML input using the ng-bind directive in Angular? While {{phoneNo["phoneno"]}} can display the data, it results in a syntax error when I try to put it like this: <input class="form-control" type="t ...

htmlangularjshtml-inputng-bind

Conceal zoom-in function in video element for Edge and Internet Explorer

I'm trying to get rid of the zoom in control on the video tag that only shows up in Edge and Internet Explorer. I've attached a snapshot for reference. I've searched for a solution but haven't had any luck. https://i.sstatic.net/7Lx8k. ...

jquerycsshtmlhtml5-video

What impact do negative positioning have on CSS elements in terms of responsibility?

Just diving into CSS and I have a question to pose: Is it considered good practice to utilize negative positioning in CSS? Are there potential compatibility issues with browsers like IE7 and IE8? What is your suggestion? #example-bottom { position: relat ...

htmlcssinternet-explorer

Ways to retrieve targeted keyframes using JavaScript

Trying to access a scoped "keyframes" named move-left in JavaScript. How can I do this while keeping it scoped? Note that vue-loader will add a random hash to move-left, such as move-left-xxxxxxxxx. <template> <div :style="{animation: animati ...

cssvue.jsvuejs2vue-component

Alignment of Inline SVG in HTML

I am struggling to align an inline SVG within a bounding DIV correctly, as shown in this example. <!DOCTYPE html> <html> <body> <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"> < ...

htmlsvgalignment