响应式表格单元格转换为新行

Question

26

我需要通过动态内容“嵌入”第三方内容网站，目前我不知道Ajax或Jquery，所以我想知道是否可以将表格单元格向下移动到新行，从而创建新行。

嵌入的结果为：

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

页面上的表格没有标记类或ID，但它是页面上唯一的表格，并且包含太多内容而无法在一行中显示。由于这是一个移动网站，所以我需要将整个页面缩小到320像素。

是否可以仅使用CSS实现？

我无法插入新的HTML代码，因为内容是从我们无法访问的安全服务器动态创建的，但我们使用API密钥来访问。但是，可以使用媒体查询。

我目前正在尝试实验以下内容：

td {clear:both;}

- user1707077

2个回答

2

当 display: block; 无效时，另一种解决方案是使用 inline-block：

CSS

td {
  display: inline-block;
}

- Legionar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2019515 · Accepted Answer

你可以将 td 的属性设置为 display:block;，这样它们就会一个接一个地排列。

HTML

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

CSS（层叠样式表）

td{
    display:block;
}