Question

我有一个两列表，我试图在某个屏幕尺寸上进行转置，以便它们成为彼此叠加的行。左列显示时间，右列显示内容。

<table>
<tr>
    <td>08.30</td>
    <td>Content</td>
</tr>
<tr>
    <td>09.30</td>
    <td>Content</td>
</tr>
<tr>
    <td>10.00</td>
    <td>Content</td>
</tr>

我试图在$ window.resize函数中实现这个technique，但是当我调整窗口大小时，表会不断切换。我对jQuery不太热，所以任何帮助都会非常感激。这是我的example。

很多

Answer 1

这是您要找的东西：https://jsfiddle.net/JTBennett/veLkf11f/3/？

检查底部以查看其工作原理：

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
    .span_2_of_2, .span_1_of_2 { width: 100%; }
    .content {text-align:center;}
    .time {text-align:center;}
}

如果您想要制作自己的可折叠色谱柱设计，请使用此工具：http://www.responsivegridsystem.com/calculator/

希望有所帮助！ -Joel

窗口上的响应表使用jQuery调整大小

1 个答案: