Fatal编程技术网
  • html/
  • Html 如何避免表中的行垂直均匀分布

Html 如何避免表中的行垂直均匀分布

html css

Html 如何避免表中的行垂直均匀分布,html,css,row,css-tables,Html,Css,Row,Css Tables,我有一张桌子，上面有一行，看起来像这样： +----------+---------+ | Spanned | Row A | | row | | | (several +---------+ | lines of | Row B | | text) | | +----------+---------+ 行A和B的内容垂直顶部对齐，但行也均匀垂直分布，以具有与跨行相同的高度。 我希望结果是这样的： +----------+-------

我有一张桌子，上面有一行，看起来像这样：

+----------+---------+
| Spanned  |  Row A  |
| row      |         |
| (several +---------+
| lines of |  Row B  |
| text)    |         |
+----------+---------+
行A和B的内容垂直顶部对齐，但行也均匀垂直分布，以具有与跨行相同的高度。 我希望结果是这样的：

+----------+---------+
| Spanned  |  Row A  |
| row      +---------+
| (several |  Row B  |
| lines of |         |
| text)    |         |
+----------+---------+
也就是说，我希望A行尽可能小，只有B行垂直展开。这能做到吗？我尝试过各种CSS样式，包括min height，但行似乎总是均匀分布的。 实际上，我有比A和B更多的行，我只希望最后一行垂直扩展到实际内容之外。我无法预测任何行中的实际内容量，因此显式设置高度是行不通的

尝试设置除第二列最后一个单元格外的所有单元格的
。 对我来说，至少在Firefox中工作得很好

如果没有html标记，回答有点困难。但您想要的行为似乎是Chrome下的默认行为

您需要为行设置一个固定的高度，并将最后一行设置为“自动”，这样它将填充表的其余高度

对于firefox，我使用了以下代码：

<html>
    <head>
        <style type="text/css">
        table td {
            border: 1px solid black;
            width: 200px;
            vertical-align: top;
        }

        table tr {
            height: 1.2em;
        }

        table tr.last {
            height: auto;
        }

        </style>
    </head>
    <body>
        <table>
            <tr>
            <td rowspan="2">Several lines of text. Lorem ipsumLorem ipsum dolor sit amet, consectetur     adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                <td>Line A</td> 
            </tr>
            <tr class="last">
                <td>Line B</td>
            </tr>
        </table>
    </body>
</html>


表td{
边框：1px纯黑；
宽度：200px；
垂直对齐：顶部；
}
表tr{
高度：1.2米；
}
表tr.last{
高度：自动；
}
几行文字。我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
A线
B行
请注意，您可以使用CSS伪类而不是我使用的“last”类，具体取决于您希望支持的浏览器。

根据CSS规范：

CSS 2.1没有指定跨多行的单元格如何影响行高计算，除非所涉及的行高总和必须足够大，以包含跨行的单元格

参考：

但是，您可以通过以下方式接近

例如，如果您有一个4行表格：

<table>
    <tr>
        <td rowspan="4">The left stuff...</td>
        <td >Row A and some more text for demo.</td>
    </tr>
    <tr>
        <td >Row B</td>
    </tr>
    <tr>
        <td >Row C</td>
    </tr>
    <tr>
        <td class="last">Row D</td>
    </tr>
</table>
为
td
高度设置一个较小的长度值。表格单元格将高度值视为最小值，因此较小的值会模拟“收缩以适应”效果

对于最后一个（底部）表格单元格，设置
height:auto
，这样可以使单元格在高度上展开。CSS规范不清楚这是否有效，结果可能取决于浏览器。（我在Firefox中进行了测试。）

请参见演示：

请提供您的标记和相关css。人们更可能给你具体的答案。将“A行”的高度设置为20%，将“B行”的高度设置为80%。杰克，我无法将高度设置为eplxicit或相对值，因为我根本不知道行中有多少内容。我正在寻找某种自动方式来实现这一点，而不考虑单元格中的实际内容。如果您在表上尝试这一点，您将看到它并没有像您所期望的那样工作。这是在表工作方式的限制范围内可以做到的最好的方法。不幸的是，我无法在我的代码中使用它。我将尝试在一条单独的消息中上载我的代码。小提琴可以工作，所以一定有一些简单的东西你在某个地方的样式表中遗漏了。我问这个问题感到非常愚蠢，但是我如何提供代码呢？如果我粘贴代码并尝试从这里的“菜单”应用代码，我会收到一个错误，告诉我在每行中添加4个空格？？？您需要将所有代码行缩进4个空格以使其看起来正确。最好是更新你的原始帖子，而不是作为评论发布。我试图更新原始帖子。很抱歉，我真的无法坐下来手动为每行添加4个空格。肯定有更简单的方法吗？