如何在HTML中从列数据而不是行数据创建表？
如何在HTML中从列数据而不是行数据创建表？
提问于 2013-04-18 07:15:35
根据W3 Schools上的这篇文章，人们可以用HTML语言创建一个基本表，如下所示：
<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>从上面看，似乎是按行输入数据。
在这种情况下，我需要按列输入所有数据。这样的事情有可能发生吗？
<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>回答 6
Stack Overflow用户
发布于 2018-08-23 03:51:40
在现代浏览器中，您可以通过在CSS中重新定义TR和TD标记行为来实现这一点。根据问题中的HTML，附加下一个CSS样式：
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>
Stack Overflow用户
发布于 2015-12-17 19:39:58
您可以通过使用表中的表在列中呈现表...
<table>
<tr>
<td>
<table>
<thead>
<tr>
<td>column 1 header 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>column 1 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<thead>
<tr>
<td>column 2 header 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>column 2 row 1</td>
</tr>
<tr>
<td>column 2 row 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>Stack Overflow用户
发布于 2013-04-21 09:19:19
最好的方法是按行呈现表格，然后使用javascript反转表格
下面的代码将反转表(此示例代码使用jquery)
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $(""); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});更新：
下面是一个也可以使用th元素的版本：http://jsfiddle.net/zwdLj/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16071864
复制相关文章
相似问题