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

Question

我是这个领域的新手。有人可以帮忙解决这个问题。 现在，我需要一个同时具有桌面和移动视图的页面。在此页面上，我需要显示一个表格。

在桌面视图中正常显示。

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

但是当切换到移动视图时，我需要使用这个具有不同结构的表： 左侧是表头，右侧是表格内容。

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

抱歉，我没有足够的声望来发布图片...

有人可以帮忙吗？

Answer 1

好吧，首先使用指定的属性为桌面编写代码，然后不久，开始使用 媒体查询（所有移动相关的父元素）编写新版本的表结构GUI 是下面的语法；在其中写下所有与移动相关的代码；

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

 // Your Codes For Mobile

} 

期待更熟悉媒体查询？然后阅读本文；

Media Queries

Answer 2

当它以不同的屏幕尺寸显示时，您可以使用媒体查询来决定布局。这个想法是，当屏幕适合 500px 或更少时，以移动模式显示表格，否则以桌面模式显示。

这里是示例代码：

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>

您应该使用一些响应式框架，例如：

• 自举：http://getbootstrap.com/
• 基金会：http://foundation.zurb.com/

他们创建了非常好的响应式列布局。