根据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>
发布于 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>
发布于 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>
发布于 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/
https://stackoverflow.com/questions/16071864
复制相似问题