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

这是您实际需要的 HTML ：

<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>

Answer 4

当考虑在表内添加数据时。我们根据行进行推理，这意味着我们将行添加到表中（而不是列）。我们将定义行内的列。

数据应该这样排列：

<table>
<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>
</table>

您可以检查 https://html.com/tables/ 了解更多详细信息。

HTML表格数据安排

4 个答案: