0

我有一个带有单个 TR 标签和两个 TD 标签的 HTML 表。每个 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>
4

3 回答 3

2

我会删除<hr>并简单地在每个底部添加一个边框<td>：

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

如果您想保留<hr>（例如，如果它没有那么宽，请<td>使用 this 代替：

<hr style="display:inline-block; width:40%;">
于 2012-08-14T12:41:28.743 回答
2

我会摆脱这些hr元素，并使用border-bottomCSS 属性在td底部呈现线条，并将vertical-align文本强制到顶部。

于 2012-08-14T12:42:13.593 回答
2

hr在's的文本行下方创建一行

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

现在您可以控制各个行的高度以获得您想要的任何间距

于 2012-08-14T12:43:21.450 回答