Question

我将HTML表格嵌套在HTML表格单元格中。我试图将内表的内容与外表单元格的顶部和底部垂直对齐，但文本间距不同：

HTML code：

<table style="position:absolute;">
<tr style="position:absolute;top:30px;">
    <td>
        <table>
            <tr>
                <td>79. Sushi Regular</td>
            </tr>
            <tr>
                <td>7 pieces sushi & 1 California roll.</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        <table>
            <tr>
                <td style="padding:8px 0 8px 0;">$17.95</td>
            </tr>
            <tr>
                <td>
                    <div style="display:inline-block;">
                        <p>Add to Cart</p>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 1

请不要使用表格进行内容对齐。这对CSS flex布局来说非常棒。

请考虑以下示例：https://jsfiddle.net/zbz81kft/6/

HTML：

<div class="outer-wrapper">
  <div class="box">
    <p class="description">Two Roll Lunch</p>
    <p class="price">$9.00</p>
  </div>
  <div class="box">
    <p class="description">3. Chirashi Sushi Lunch<br>Assortment ...</p>
    <p class="price">$13.95</p>
  </div>
</div>

CSS：

.outer-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
}

.box {
  background: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  margin: 1px;
  padding: 5px;
}

可以在此处找到CSS flex布局的演示指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

如果您希望文本位于每个td的顶部，请为每个td添加一个div并将内容放入div。

td div{height:100%;}

现在你可以更好地管理你想要的东西了。

Answer 3

在您希望内容垂直对齐的numpy中，使用td或<td valign="middle">

Answer 4

如果你确实想要使用表，你可以设置文本的行高等于父td的高度。

你必须做这样的事情：

td{
height:60px;
}

td span{
line-height:60px;
}

或者你可以尝试将td内的跨度设置为内联块并设置其属性vertical-align：middle或尝试顶部/底部，我不会使用它们，所以有时它们只是表现不正常只是尝试不同的值和看看它是否有帮助！如果你正在尝试这个，那么确实给它的跨度小于它的父级。

无法跨表格单元格垂直对齐文本（HTML）

4 个答案: