HTML表格数据排列

Question

我有一个关于HTML表格安排的问题。

<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>

​

我得到的元素排列如下：

1 2 3
4 5 6
7 8 9

是否可以先填充所有第一列(不是行)，然后填充第二列，依此类推？我想得到这样的东西：

1 4 7
2 5 8
3 6 9 

Answer 1

这是您实际需要的超文本标记语言：

<tr>
  <td>1</td>
  <td>4</td>
  <td>7</td>
</tr>
<tr>
  <td>2</td>
  <td>5</td>
  <td>8</td>
</tr>
<tr>
  <td>3</td>
  <td>6</td>
  <td>9</td>
</tr>

Answer 2

如果数据是动态添加到表中的，这是不可能的。但是你也可以使用.div来达到同样的效果，需要一点CSS才能达到同样的效果：

我很快创建了一个jsfiddle。

https://jsfiddle.net/0dpn1ccu/

Answer 3

您可以通过添加css简单地将行转置为列

​

tr { display: block; float: left; }
th, td { display: block; }

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>

​