桌面和移动视图的表结构不同

Question

I am new to this area. Could someone please help out of this. Now, I need a page with both desktop and mobile view. On this page, I need a table displayed.

In the Desktop view, it is displayed normally.

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

But when switching to mobile view, I need to use this table with a different structure: With the table head at the left side and the table content at the right side.

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

Sorry, I don't have enough reputation to post images...

Could someone please help out of this?

Answer 1

Well, write your codes for desktop first with the specified attributes, and soon after, start writing a new version of your table structure using media queries , the parent element for all your mobile-related GUI is the syntax below; write all your mobile-related codes in there;

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

 // Your Codes For Mobile

} 

Looking forward to get more familiar with media queries? then read this;

Media Queries

Answer 2

You can use media query to decide layout when it display in different screen sizes. The idea is, when screen fit 500px or less, display table in mobile mode, otherwise, display in desktop mode.

Here is example code:

CSS

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

/*mobile mode*/
@media only screen and (max-width: 500px) { // max-width is the size of the web broswer in mobile 
    #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>

You should use some Responsive Framekwork such as:

• Boostrap: http://getbootstrap.com/
• Foundation: http://foundation.zurb.com/

They created really nice responsive column layout.