Html 如何固定标签底部的水平线和顶部的文本_Html_Css

Html 如何固定标签底部的水平线和顶部的文本

html css

Html 如何固定标签底部的水平线和顶部的文本,html,css,Html,Css,我有一个带有单个TR标记和两个TD标记的HTML表。每个TD中有两条水平线或HR标记，带有一些文本。因此，我希望将文本固定在TD的顶部，并将水平线固定在每列的底部下面是示例代码 <html> <body> <table width="100%"> <tr> <td style="text-align: left; width: 50%;"> sdba

我有一个带有单个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>

我将删除，只需在每个的底部添加一个边框：

如果您想保留，例如，如果其宽度不如所需宽度，请使用以下选项：

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

我会去掉hr元素，使用td上的border-bottom CSS属性来渲染底部的线条，并垂直对齐以强制文本到顶部。

在文本行下方为hr创建一行

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

Hm，我认为这会为单个行增加许多HTML结构和语义。@InsertUserName通常不首选在此处使用表，但鉴于OP使用的是表，在糟糕的情况下这是最好的。表格内容是一件好事；但是我知道你的意思。@InsertUserName这里我可能被宠坏了：我有一个CSS片段，用于基于DIV的表，其行为几乎相同，向每个TD添加底部边框将合并两条水平线。这就是为什么你可以使用第二种解决方案，并将代码保留为“display:inline block；”在。添加底部边框将合并两条水平线。您可能需要一些更极端的东西；查看这个JSFIDLE:-它使用原始标记加上绝对和相对定位，再加上td上的一点填充。

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

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