Html 如何对齐内容不相等的列

如果表中一列的内容多于其他列的内容，则默认情况下，浏览器会将内容较少的列的内容对齐为

垂直对齐：继承

tr{
内部分页符：避免；
}
桌子
运输署，
th{
边框：1px纯黑；
}
跨度{
利润率：10px；
}

1.
2.
3.
第1栏
第2栏
这是第1段

这是第2段

这是第3段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

像这样使用

valign

：

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td valign="top">
      <span>Column 1</span>
    </td>
    <td valign="top">
      <span>Column 2</span>
    </td>
    <td>
      <p>This is para 1</p>
      <p>This is para 2</p>
      <p>This is para 3</p>
      <p>This is para 4</p>
      <p>This is para 5</p>
      <p>This is para 6</p>
      <p>This is para 7</p>
      <p>This is para 8</p>
    </td>
  </tr>
</table>

1.
2.
3.
第1栏
第2栏
这是第1段

这是第2段

这是第3段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

对于较小的内容，只需在

td valign=“top”

属性中使用

valign

。可以选择使用

valign center

和

valign bottom

使内容居中和底部对齐，如下所示

tr{
内部分页符：避免；
}
桌子
运输署，
th{
边框：1px纯黑；
}
跨度{
利润率：10px；
}
1.
2.
3.
第1栏

第2栏

这是第1段

这是第2段

这是第3段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

试试这个

tr{
内部分页符：避免；
}
桌子
运输署，
th{
边框：1px纯黑；
垂直对齐：顶部；
}

1.
2.
3.
第1栏
第2栏
这是第1段

这是第2段

这是第3段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

您的问题是，除了垂直对齐：顶部对于

td

标记，您需要更改

p

标记的默认CSS。
删除

页边距顶部

后，文本将转到单元格顶部

我添加了以下更改：

td {
  vertical-align: top;
}

p {
  margin-top: 0;
}

请参阅下面的代码片段：

tr{
内部分页符：避免；
}
桌子
运输署，
th{
边框：1px纯黑；
}
运输署{
垂直对齐：顶部；
}
跨度{
利润率：10px；
}
p{
边际上限：0；
}

1.
2.
3.
第1栏
第2栏
这是第1段

这是第2段

这是第3段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

你能分享你的CSS吗？@oram我已经在标题部分添加了CSS。注意，内容在“这是第1段”文本上方，我已经更新了代码片段。如果您使用

p

标记而不是

span

则该行变为同一行。