响应式表格列和行（仅 CSS）答案

【问题标题】：Responsive table columns and rows (only CSS)响应式表格列和行（仅 CSS）
【发布时间】：2014-05-27 17:32:11
【问题描述】：

这是我的情况：

我有一个 100% 宽度的 3x2 html 表格。

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

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

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

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

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

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

谢谢

【问题讨论】：

你不能用表格和没有javascript来实现这一点。如果一个表被定义为有 3 列，那么无论如何它都会有 3 列。使用 javascript，您可以捕获调整大小事件、检查大小并删除/重新添加表格中的单元格。我不知道为什么你不能有 div - 这会容易得多。
SO 是为了询问具体问题而不是在没有采取任何方法的情况下得到解决方案
感谢您的回答。我打算采用的方法是 javascript 操作。我只是想知道在 css 中是否有一种棘手的方法可以做到这一点，不一定要修改表结构（它仍然可以是 3x2 表），而是模拟 div 行为。还是谢谢

标签： javascript jquery html css media-queries

【解决方案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更窄的视口上

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这对于纯 HTML 是不可能的，无论用 HTML 写什么，它都会在那里！

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

http://getbootstrap.com/

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

如果，你想自己做，不用 Bootstrap，逻辑是这样的，但是代码要自己写。

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

ii) 设置你的调整大小条件，如果遇到重新绘制表格

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

【讨论】：

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

【讨论】：