CSS：是否可以使表格行中的水平单元格正确排列？

Question

背景：我有一个客户，他的网站是由一个老的模糊框架中的其他人构建的，我无法通过查看这些文件来清楚地识别它。该网站有几页成员组织使用的表格数据。

结构挑战：他们想将内容表iframe到另一个系统中。 iframe工作正常，但表格太宽而无法移动。我可以使用CSS将表格强制为较小的宽度，但这会使信息无法使用。

问题：我知道如何让div以表格形式排列。是否可以通过CSS将<td>排列在彼此之下，而不是彼此相邻，在大纲类型层次结构中？

Answer 1

你可以让他们display: block;

td { 
 
    display: block; 
 
}

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

我不知道有关这个浏览器的支持，但可以使tr的一个flex-column。

tr { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

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