按列的响应表 [英] Responsive table by columns

问题描述

我有一个包含四列的表格，我需要一个响应式表格，其中每一列都在另一列下方，但我不知道该怎么做.我希望有一些不使用 Javascript 的答案.

I have a table with four columns and I need to have a responsive table where each column will be below the other but I don't know how to do it. I hope that there is some answer without using Javascript.

现在我有一张这样的桌子:

Now I have a table like this:

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

而且我需要以较小的分辨率获得此结果:

And I need to get this result in smaller resolution:

+-----------+
| Some text |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+

等等.它以某种方式可能吗?这是我的 JSfiddle.jsfiddle 中的答案也是最好的.

And so on. Is it somehow possible? Here is my JSfiddle. Also the answer in jsfiddle would be best.

推荐答案

表格有响应性问题，因为表格数据是按行写的，所以代码中的数据是这样的:A, B, C, D, A, B, C, D... 不是 A, A, A, A, B, B, B, B...

Table have a problem with responsivity, because table datas are written by lines, so data in code looks thus: A, B, C, D, A, B, C, D... not A, A, A, A, B, B, B, B...

所以你不能以正确的顺序输出数据.

So you not get output with datas in the right order.

如果您使用媒体查询，输出如下:

If you use media query, output looks thus:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }
}

http://jsfiddle.net/sjdjrm8m/

您需要将您的表格转换为此注册:

You need convert your table to this enrollment:

HTML:

<table>
            <tr>
            <td colspan="2">Some title</td>
        </tr>
    <tr>
        <td>

<table>
    <tbody>

        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
 </table>
    </td><td>
<table>
    <tr>
        <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
    </tr>
    <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
</table>

CSS:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }

    tr tr{
        margin-bottom:0;
    }
}

http://jsfiddle.net/9yefftan/

这篇关于按列的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！