Javascript 响应表列和行（仅CSS）

这就是我的情况：

我有一张宽度为100%的3x2html表格

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

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

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

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

最好的解决方案是主要使用CSS，并尽可能避免javascript/jquery操作。。如何做到这一点

---

谢谢

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

---

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

这在普通HTML中是不可能的，无论用HTML编写的内容是什么

如果您想要一个简单的方法，请查看bootstrap，但它对您的喜好来说有点重

Bootstrap可以为您调整表的大小，使用起来非常简单

如果，你想自己做而不需要引导， 这是逻辑，但您必须自己编写代码

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

ii）如果满足调整大小条件，请重新绘制表格

仅仅使用简单的CSS和HTML是不可能的，你需要javascript来捕捉事件

试试下面的代码：（在最新的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的视口中浮动单元格。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);
});

$（“按钮”）。单击（函数（）{
tds=新数组（）；
$（“表td”）。每个（函数（）{
推送（“”+$（this.html（）+“”）；
});
newtable=''；
对于（i=0；iYou无法在没有javascript的情况下使用表来实现这一点。如果表定义为有3列，那么无论发生什么情况，它都将有3列。使用javascript，您可以捕获调整大小事件，检查大小并删除/重新添加表中的单元格。我不确定为什么不能使用div-这将非常简单。询问具体问题也是如此在没有任何方法的情况下，我不会得到解决方案。我将采取的方法是javascript操作。我只是想知道在css中是否有一种棘手的方法来完成它，不一定要修改表结构（它仍然可以是3x2表），而是模拟div行为。无论如何，谢谢
$("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);
});