Question

如果表中某一列的内容多于其他列的内容，则默认情况下，浏览器会将具有较少内容的列的内容对齐为vertical-align: inherit。

tr {
  page-break-inside: avoid;
}

table,
td,
th {
  border: 1px solid black;
}

span {
  margin: 10px;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>
      <span>Column 1</span>
    </td>
    <td>
      <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>

但就我而言，我希望他们成为vertical-align: top。设置此选项会导致将内容较少的列的内容拉到内容较多的列的上方。

我想将内容“第1列”和“第2列”的内容与“这是第1段”平行。

Answer 1

只需将valign属性td valign="top"用于较小的内容。可以选择使用valign-center和valign-bottom使其内容居中对齐，如下所示。

<!DOCTYPE html>
<html>

<head>
    <style>
        tr {
            page-break-inside: avoid;
        }
        
        table,
        td,
        th {
            border: 1px solid black;
        }
        
        span {
            margin: 10px;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td valign="top">
                <p>Column 1</p>
            </td>
            <td valign="top">
                <p>Column 2</p>
            </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>
</body>

</html>

Answer 2

尝试

tr {
  page-break-inside: avoid;
}

table,
td,
th {
  border: 1px solid black;
  vertical-align: top;
}

<!DOCTYPE html>
<html>

<body>

  <table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <td>
        Column 1
      </td>
      <td>
       Column 2
      </td>
      <td>
        This is para 1<br>
        This is para 2<br>
        This is para 3<br>
        This is para 4<br>
        This is para 5<br>
        This is para 6<br>
        This is para 7<br>
        This is para 8<br>
      </td>
    </tr>
  </table>
</body>

</html>

很明显，您需要使用align属性来调整文本。

并尝试在表中使用 代替。

但是，如果您仍然坚持使用标签，

然后，您还需要为第一和第二列应用标签，而不是。这是因为和是不同的div。这样您的文本就不会彼此对齐。

Answer 3

您的问题是，vertical-align: top;标签除了td之外，还需要更改p标签的默认CSS。
删除margin-top后，文本将转到单元格的顶部。

我添加了以下更改：

td {
  vertical-align: top;
}

p {
  margin-top: 0;
}

请参见下面的代码段

tr {
  page-break-inside: avoid;
}

table,
td,
th {
  border: 1px solid black;
}

td {
  vertical-align: top;
}

span {
  margin: 10px;
}

p {
  margin-top: 0;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>
      <span>Column 1</span>
    </td>
    <td>
      <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>

或者，您可以将其他单元格的文本放在p标签而不是span标签内，这将导致它们具有相同的样式并获得相同的margin-top值和display: block;。

tr {
  page-break-inside: avoid;
}

table,
td,
th {
  border: 1px solid black;
}

td {
  vertical-align: top;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>
      <p>Column 1</p>
    </td>
    <td>
      <p>Column 2</p>
    </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>

Answer 4

像这样使用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>

如何对齐不相等内容的列

4 个答案: