Html 将td的高度设置为文本的高度_Html_Css

Html 将td的高度设置为文本的高度

html css

Html 将td的高度设置为文本的高度,html,css,Html,Css,我希望我的元素与顶部对齐（表中的元素）。现在我有： xxx yyy zzz yyy qqq fff ggg 我想： xxx yyy zzz qqq yyy ggg fff 代码： td{垂直对齐：顶部；右侧填充：30px；宽度：20px；} th tr{宽度：220px；} 标题标题标题 td1 td2布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布

我希望我的元素与顶部对齐（表中的元素）。现在我有：

xxx yyy zzz
    yyy 
qqq fff ggg

我想：

xxx yyy zzz
qqq yyy ggg
    fff

代码：


td{垂直对齐：顶部；右侧填充：30px；宽度：20px；}
th tr{宽度：220px；}
标题
标题
标题
td1
td2布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
td3
td1
td2
td3

我有一把小提琴：

提前感谢

这是不可能的（至少不是您设置的方式）

不能“断开”表行。这就是桌子的工作原理

我唯一能想到的就是使用

行span

，但我不知道这是否有助于您的具体案例

更新

还请注意您是否应该使用表格。

这是不可能的（至少不是您设置表格的方式）

不能“断开”表行。这就是桌子的工作原理

我唯一能想到的就是使用

行span

，但我不知道这是否有助于您的具体案例

更新

还请注意您是否应该使用表格。

您的单元格内容与顶部对齐。您似乎想将第二行单元格中的某些内容向上移动。要实现这一点，请将内容移动到第一行。

如果您不介意内容保留在表中设置的

x/y

位置，我猜这不是表格数据，因此您不应该使用表格

因此，我建议使用div和CSS来定位此内容

如果您不担心表中设置的

x/y

位置中剩余的内容，我猜这不是表格数据，因此您不应该使用表格

因此，我建议使用div和CSS来定位此内容

那我该怎么做呢？放下表格，像div那样做？？内容的性质是什么？表格数据还是其他？我该怎么做？放下表格，像div那样做？？内容的性质是什么？表格数据还是其他？它仍然可以是表格数据。特别是当我注意到有标题的时候。这可能是列标题。比如“最新消息”等等。。我从未听说过表格数据会因为恰好是空的而转移到上面的记录中。它可能不是表格数据，但你的假设是错误的

rowspan

colspan

存在的原因如下：）。同样，你可能是对的。我相信

rowspan

colspan

存在的原因是用于分组数据的标题。虽然我对你的答案投了赞成票，但我不相信你使用

rowspan

的目的是什么。它仍然可以是表格数据。特别是当我注意到有标题的时候。这可能是列标题。比如“最新消息”等等。。我从未听说过表格数据会因为恰好是空的而转移到上面的记录中。它可能不是表格数据，但你的假设是错误的

rowspan

colspan

存在的原因如下：）。同样，你可能是对的。我相信

rowspan

colspan

存在的原因是用于分组数据的标题。虽然我对您的答案投了赞成票，但我不相信您使用

rowspan

是出于什么目的。使用

rowspan

是一个选项，但是您需要明确设置行的高度。在这种情况下，

tr:first child+tr{height:1.2em；}

会这样做。值

1.2

应替换为指定给

行高的任何值（但如果未设置值，1.2
应合理工作）.@JukkaK.Korpela高度
的用途是什么？如果不设置高度
，浏览器可能会使行太高，以至于与此处所需的渲染相比，在下一行之前有太多空间。使用行span
是一个选项，但是您需要显式设置行的高度。在这种情况下，tr:first child+tr{height:1.2em；}
会这样做。值1.2
应替换为指定给行高的任何值（但如果未设置值，1.2
应合理工作）.@JukkaK.Korpela高度
的用途是什么？如果不设置高度，浏览器可能会使行太高，以至于与此处所需的渲染相比，下一行之前有太多空间。
<html>
<style type="text/css">
td {vertical-align:top;padding-right:30px;width:20px;}
th tr {width:220px;}
</style>
<table border="0">
    <tbody>
        <tr>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2 bla bla bla bla bla bla blablablablablablablablablablabla</td>
            <td>td3</td>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2</td>
            <td>td3</td>
        </tr>
    </tbody>
</table>
</html>