Question

这是我的情况：

我有一个 3x2 html表，宽度为100％。

| CELL A1 | CELL A2 | CELL A3 | 
------------------------------- 
| CELL B1 | CELL B2 | CELL B3 |

每个单元格都有一个最小宽度（例如300px）。

所以我想要做的是：当调整大小在900px以下时，一个单元格应该转移到下一行（而不是创建滚动），并且表格将变为 2x3 ，就像这样（不必改变原始表格）结构）：

| CELL A1 | CELL A2 |
---------------------
| CELL A3 | CELL B1 |
---------------------
| CELL B2 | CELL B3 |

约束：这必须是一个表，而不是div。

最佳解决方案是使用大多数CSS并尽可能避免javascript / jquery操作..如何做到这一点？

由于

Answer 1

尝试使用以下代码：http://codepen.io/anon/pen/fwdio（在最新的Firefox和Chrome上测试）

<强> CSS

table{
  width: 100%;
}

tr {
  display: inline;
}

td {
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
    background: #d8d8d8;
} 

/* revert/restore properties on larger screen */
@media all and (min-width: 900px) {
  tr {
    display: table-row;
  }
  td {
    float: none;
    min-width: 300px;
  } 
}

基本上，我们的想法是将表行的显示属性更改为inline，并将单元格浮动到比900px

更窄的视口上

Answer 2

如果是静态表，那么这是一个简单的解决方案。

使用这两种不同类型的表创建两个分区。最初隐藏三行表。使用媒体查询检查宽度并使三行分区可见并隐藏两行分割。

Answer 3

使用纯HTML无法做到这一点，无论用HTML编写它都会在那里！

如果你想要一个简单的方法检查引导程序，但它有点你喜欢的重量

http://getbootstrap.com/

Bootstrap，为您完成表格的所有大小调整，使用起来非常简单。

如果你想在没有Bootstrap的情况下自己动手，这是逻辑，但你必须自己编写代码。

i）不断检查窗口大小的调整大小

ii）调整你的调整大小条件，如果遇到再次重绘表

无法使用纯CSS和HTML，您需要使用javascript来捕获事件

Answer 4

CSS无法解决这个问题。

您可以使用jquery / Javascript解决方案。

溶液：

$("button").click(function(){
    tds=new Array();
    $("table td").each(function(){
        tds.push('<td>'+$(this).html()+'</td>');
    });
    newtable='';
    for(i=0;i<tds.length;i+=2){
        newtable+='<tr>'+tds[i]+tds[i+1]+'</tr>';
    }
    $('table').html(newtable);
});

http://jsfiddle.net/Dk3JM/1/

响应表列和行（仅CSS）

4 个答案: