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

【问题标题】：Responsive table on window resize using jQuery使用jQuery调整窗口大小的响应表
【发布时间】：2016-02-04 07:59:48
【问题描述】：

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

<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。

很多

【问题讨论】：

jsfiddle.net/brettdewoody/xnJ9Q 这是它工作的一个例子
使用浮动 DIV 和媒体查询最容易完成。 w3schools.com/css/css_rwd_mediaqueries.asp
带 flex 的 Divs 可能吗？
css-tricks.com/examples/ResponsiveTables/responsive.php和文章css-tricks.com/responsive-data-tables
不幸的是，它需要在表格中，以便客户可以在 Wordpress 中对其进行编辑，否则我会在 Divs 中到处都是。我已经尝试过上面的响应式表格方法，但在 IE 9 及以下版本中遇到了问题。

标签： jquery html css responsive-design html-table

【解决方案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/

希望对您有所帮助！ -乔尔

【讨论】：