如何从列数据而不是 HTML 中的行数据创建表格? [英] How to create tables from column data instead of row data in HTML?

问题描述

根据 W3 Schools 上的这篇文章，可以在 HTML 中创建一个基本表格像这样:

According to this article at W3 Schools, one can create a basic table in HTML like this:

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

从上面看，似乎是按行输入数据.

From above, it appears that one enters data by rows.

我遇到一种情况，需要按列输入所有数据.这样的事情可能吗?

I have a situation where I need to enter all of the data by columns. Is something like this possible?

<table border="1">
    <tc>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tc>
    <tc>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tc>
</table>

推荐答案

在现代浏览器中，您可以通过在 CSS 中重新定义 TR 和 TD 标签行为来实现这一点.鉴于您问题中的 HTML，请附加下一个 CSS 样式:

In modern browsers you can achieve this by redefining the TR and TD tags behavior in CSS. Given the HTML in your question attach the next CSS style:

table {
	display: table;
}
table tr {
	display: table-cell;
}
table tr td {
	display: block;
}

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tr>
    <tr>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

这篇关于如何从列数据而不是 HTML 中的行数据创建表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！