9

我正在创建一个 html 模板，该模板包含用于布置表单的表格。我可以完全控制包装表格而不是表格本身的 html。该表在发送到客户端之前被注入到我的模板中。我无法控制这一切。我唯一可以控制的是包装表格和任何 CSS 的 html。

该表是一个两列的表，如下所示：

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>this is column 1</td>
    <td>this is column 2</td>
  </tr>
</table>

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is column 1           |this is  column 2  |
-------------------------------------------------

但是，如果我们可以将其显示为一个堆叠的列，我会更喜欢。

----------------------------
|Column 1                   |
-----------------------------
|this is column 1           |
-----------------------------
|Column 2                   |
-----------------------------
| this is column 2          |
-----------------------------

有没有办法只使用 CSS 而不是 Javascript 来实现这一点？

4

8 回答 8

21

尝试将此添加到您的 CSS：

td {
  display: table-row;
}

干杯。

于 2012-09-10T09:23:47.233 回答
4

我最近遇到了类似的问题，似乎找到了一个很好的解决方案。由于频繁的误用，表格的评价很差，但当需要在可变宽度的视口中显示数据网格时，表格确实是最精简的选择。

原始问题的答案仍然是否定的。为了在没有 JavaScript 的情况下解决这个问题，必须能够编辑表格标记。

桌子看起来……好吧……当被拉宽时，但被压扁时看起来很糟糕。span.label只有通过向每个单元格（例如&span.data元素）添加上下文标记，“响应式”表才有可能。默认情况下，我们可以轻松隐藏这个新的多余输出，并且仅在处于响应式视图状态时才显示它。

table.responsive td .label {
  display: none;
}
<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

当处于响应视图状态时，隐藏thead元素并显示.label元素。

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

我创建了一个更详细地涵盖解决方案的存储库。单击此处查看它的工作原理。

于 2016-08-27T06:13:35.023 回答
3

    简单地; 不可以。如果没有一些 JavaScript，您无法将行将 2 列的表转换为 1 列的表。
    要么告诉表格的编码人员以这种方式创建表格，要么简单地使用 JavaScript 重新构造表格。

于 2012-09-10T09:32:31.140 回答
2

不，如果不更改标记，这是不可能的。HTML 中的表格结构为行，而不是列。在您提供的示例中，您正在重新排序内容：

原始订单：
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

新订单：
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

为什么我说“不可能”？好吧，使用绝对定位和类似的技术，您也许可以一起破解您想要的布局 - 但是有一个 CSS 伤害的世界等待，因为我不希望这种方法在真实页面中发挥出色。

附加说明：为了添加“重新排序”问题，可能更容易完成的事情是这种布局，其中顺序保持不变：

----------------------------
|Column 1                   |
-----------------------------
|Column 2                   |
-----------------------------
|this is column 1           |
-----------------------------
| this is column 2          |
-----------------------------

但这显然不是你想要的。

于 2012-09-10T09:13:43.023 回答
0

您可以使用display:block;.

看到这个小提琴：http: //jsfiddle.net/R53KH/

于 2012-09-10T09:43:52.427 回答
0

我能想到的唯一解决方案是更改您的标记。我会以这样的方式更改它，以获取一列并将其写为标记中的一行。这是我创建的小提琴：http: //jsfiddle.net/MHsxU/

于 2012-09-10T09:44:28.067 回答
0

仍然有问题并且在 Chrome 中？

对于那些仍然有问题的人（比如我），请检查您<!DOCTYPE html>的文档头部。如果您不这样做，Chrome 似乎会完全忽略您添加和保留的任何内容display: table-cell。

于 2016-02-11T17:17:38.423 回答
0

实际上，这非常简单（可以用 2 行 css 完成）：将 td 宽度设置为 100% 并设置溢出：自动。您的第二列将自动环绕。

于 2018-08-02T03:45:30.880 回答