Question

我有一个带有单个TR标记的HTML表格，其中包含两个TD标记。每个TD中有两条水平线或HR标签，带有一些文本。所以我想在每个列的底部TD和水平线上修复文本。

这是示例代码。

  <html>
<body>
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <hr width="40%" />
            </td>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                <hr width="40%" />
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

我会删除<hr>，只需在每个<td>的底部添加一个边框：

<td style="text-align: left; width: 50%; border-bottom: 1px solid red;"></td>

如果您想保留<hr>（例如，如果它不像<td>那么广泛使用它：

<hr style="display:inline-block; width:40%;">

Answer 2

我将摆脱hr元素，并使用border-bottom上的td CSS属性渲染底部的行，并vertical-align强制使用文字到顶部。

Answer 3

在hr的

文本行下方添加一行

<tr>
  <td>
    Text
  </td>
  <td>
    Text
  </td>
</tr>
<tr>
  <td>
    <hr width="40%" />
  </td>
  <td>
    <hr width="40%" />
  </td>
</tr>

现在，您可以控制各行的高度以获得所需的任何间距

如何修复底部的水平线和标签顶部的文本

3 个答案: