如何创建可折叠网格、table 或列

Question

我想在 2 列中显示数据。当有足够的空间时，数据应如下所示：

|  data   |  data2  |
|  data3  |  data4  |
|  data5  |  data6  |

如果用户在那里调整大小 window 导致没有足够的空间来显示两列，我希望数据看起来像这样：

|  data   |
|  data2  |
|  data3  |
|  data4  |
|  data5  |
|  data6  |

如果我猜的话，网上已经有关于此的问题和帖子，但我不知道要搜索什么。非常感谢链接、提示、示例代码和指南！

Answer 1

这样的怎么样？

http://jsfiddle.net/LcsgtaLv/1/

这里的问题是您必须决定 "break" 的大小（table 的大小将开始显示在 2 列上），就像我们在这里所做的那样:

@media screen and (min-width: 700px) {

基本上我们让他们获得 100% 的宽度直到 700px，从那里我们将他们关闭到 49% - 2px（因为有边框，如果没有边框我们只能做 50%） .

希望对您有所帮助。

Answer 2

在此示例中，您可以使用 table（在语义上适合显示表格数据）。在较小的设备上，您可以将单元格的显示布局更改为块状，而不是其初始 table 单元格布局。

您可以在下面查看示例。如果屏幕低于 400px（可以调整），它将变为单列。

这里还有 fiddle：http://jsfiddle.net/vz6nLj8a/1/

.responsive-table td {
    display: block;
    border: 1px solid;
    border-width: 0 1px;
    padding: .5em 1em;
}
    

@media (min-width: 400px) {
    .responsive-table td {
        display: initial;
        border-right-width: 0px;
    }
        .responsive-table td:last-child {
            border-right: 1px solid;
        }
}

<table class="responsive-table" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
        <tr>
            <td>data3</td>
            <td>data4</td>
        </tr>
        <tr>
            <td>data5</td>
            <td>data6</td>
        </tr>
    </tbody>
</table>

Answer 3

如果不需要支持IE9及以下版本可以使用display: flex

.items {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.item {
    flex-basis: 50%;
}

@media only screen and (max-width: 767px) {
    .item {
        flex-basis: 100%;
    }
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

如何创建可折叠网格、table 或列

How to create collapsable grid, table, or columns

html

javascript

css

html-table