Question

制作一个包含一些表的响应式网站，这些表包含我希望在进入较小屏幕时折叠或堆叠的水平数据。

可以通过CSS样式表结构吗？

我希望这些可以叠加在一起，就像构建块一样

<table align="center" border="0" cellpadding="1" cellspacing="1"     style="width:100%;margin-left: 3px;">
   <tbody>
    <tr>
        <td><a href="/link31"><img src="/link1.jpg"/> style="border-style:solid; border-width:10px; float:left; max-height:236px; width:93%;" </a></td>
        <td><a href="/link2"><img src="link2.jpg"/> style="border-style:solid; border-width:10px; float:left; max-height:236px; width:93%;"</a></td>
        <td><a href="/link3"><img src="/link3.jpg"/> style="border-style:solid; border-width:10px; float:left; max-height:236px; width:92.5%;" </a></td>
    </tr>
</tbody>
</table>

Answer 1

使用媒体查询。它用于使网页响应。我给出了一个非常简单的例子，你可以根据你的意思写下来。

    @media only screen and (min-width : 320px) and (max-width : 480px) {

        td[class="img-header"]{

            width:100% !important;
            display:block;
        }

    }
    @media only screen and (min-width : 480px) and (max-width : 767px) {

        td[class="img-header"]{

            width:100% !important;
            display:block;


        }

    }
   @media only screen and (min-width : 768px) and (max-width :1200px) {
     //your css code
  }

JSfiddle：https://jsfiddle.net/Dee0565/q5Ldq3ny/

Answer 2

我认为你正在寻找一个快速响应的解决方案。如果JQuery是你的选择，那么有一个名为StackTable的插件可以为你解决这个问题。以下是演示的链接：http://johnpolacek.github.io/stacktable.js/

Answer 3

你绝对可以这样做 - 只需要声明要叠加的元素display:block;

看到这个非常简单的例子： http://jsfiddle.net/cn858387/

你可以在CSS中折叠/重新安排一个表

3 个答案: