首页 / 技术问答 / Html问答列表 / 问答详情

Html 嵌套表列高度不是100%高度的问题

我有这个超文本标记语言表格.

但是我遇到了一个问题，即右侧的列(嵌套表)没有占据整个表的高度.

我希望它可以调整大小，即使描述栏中的文本也很短.目前，我try 了一些与身高有关的随机测试，但似乎都不管用.

fulfillmentLine级没有占据整个柱子的高度，有人能告诉我为什么会发生这种情况吗？

我想要这样的东西:

enter image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        .innerTable {
            padding: 0;
            font-size: 20px;
        }

        .orderLine {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLine {
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }

        .fulfillmentLine td {
            width: 50px;
            height: 100px;
            /* this */
            border-right: 1px solid black;
        }

        .orderLineEnd {
            border-left: 1px solid black;
        }


        .borderRight {
            border-right: 1px solid black;
        }

        .orderLineHeader {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-bottom: 1px solid black;

        }

        .fulfillmentLineHeader {
            width: 130px;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLineHeader td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            text-align: center;
            min-width: 45px;
        }

        .bottomBorder {
            width: 100%;
            height: 1px;
            border-top: 1px solid black;
        }

        .itemName {
            width: 300px;
        }
    </style>
</head>

<body>
    <table class="bodySection o" cellpadding="0" cellspacing="0" border="0">
        <tr class="orderHeaders">
            <td class="orderLineHeader">Description</td>
            <td class="fulfillmentLineHeader borderRight" align="center">
                <table cellspacing="0" cellpadding="0" class="innerTable" border="0">
                    <td class="borderRightThick">ABC </td>
                    <td class="borderRightThick lightGreyRow">ABC</td>
                    <td class="borderRightThick">ABC</td>
                </table>
            </td>
        </tr>

        <tr style="page-break-inside : avoid">
            <td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
                loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
                ipsum loremLorem ipsum lorem</b></td>
            <td class="fulfillmentLine borderRight">
                <table cellspacing="0" class="innerTable ">
                    <td></td>
                    <td></td>
                    <td></td>
                </table>
            </td>
        </tr>

    </table>
    </div>
    </table>
    <br />

</body>

</html>

推荐答案

玩了一会儿后，将容器(<；td>；)设置为相对位置，并将内桌设置为绝对位置.也可以看到，在得到解决方案之前，任何其他调整都是遗留下来的.

我将内部表格 colored颜色 编码为灰色，容器 colored颜色 编码为蓝色，以便查看任何未填充的空间.一点都没有.但是没有绝对的定位，就有了原来的问题.

<style>
        
        .innerTable {
            padding: 0;
            font-size: 20px;
            
        }

        .orderLine {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLine {
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }

        .fulfillmentLine td {
            width: 50px;
            height: 100px;
            /* this */
            border-right: 1px solid black;
        }

        .orderLineEnd {
            border-left: 1px solid black;
        }


        .borderRight {
            border-right: 1px solid black;
        }

        .orderLineHeader {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-bottom: 1px solid black;

        }

        .fulfillmentLineHeader {
            width: 130px;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLineHeader td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            text-align: center;
            min-width: 45px;
        }

        .bottomBorder {
            width: 100%;
            height: 1px;
            border-top: 1px solid black;
        }

        .itemName {
            width: 300px;
        }
        
        * {
            padding:0px !important;
            margin:0px  !important;
        }
<body>
    <table class="bodySection o" cellpadding=0 cellspacing=0 border=0>
        <tr class="orderHeaders">
            <td class="orderLineHeader">Description</td>
            <td class="fulfillmentLineHeader borderRight" align="center">
                <table cellspacing=0 cellpadding=0 class="innerTable" border=0>
                    <td class="borderRightThick">ABC </td>
                    <td class="borderRightThick lightGreyRow">ABC</td>
                    <td class="borderRightThick">ABC</td>
                </table>
            </td>
        </tr>

        <tr style="page-break-inside : avoid">
            <td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
                loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
                ipsum loremLorem ipsum lorem</b></td>
            <td class="fulfillmentLine borderRight" style="background:blue; height:100%; position:relative;">
                <table cellspacing=0 cellpadding=0 class="innerTable" style="background:gainsboro; padding:0px; height:100%; position:absolute; left:0px; top:0px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </table>
            </td>
        </tr>

    </table>
    </div>
    </table>
    <br />

</body>

</html>

我有内联样式，如果你喜欢，就把它应用到你的类中.

Html相关问答推荐

为什么在Vuettify 3中使用Flex时会忽略宽度？

当ul为Flex时，使ul元素在指定高度内可垂直滚动

关于角内按钮范围的混乱

CSS复选框并排

Vue.js复选框对齐问题：在表格单元格中居中复选框

当在双引号｜Angular .html文件中使用时，Pretier会将单引号字符替换为&；Quot；

如何防止第二列中的内容影响第一列中内容的位置？

当溢出到滚动条中时， bootstrap 按钮样式会更改

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容，包括页眉/设置纸张/方向/适合页面/总计

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

在选项标签中如何添加Django模板的条件

Angular中如何向单选按钮添加验证

使用 R 中的 rvest 包获取搜索结果的第一个链接

在