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>