单元格为空时，HTML表单元格大小不正确

Question

我想要表格单元格的尺寸一致。单元格为空时，我遇到问题。看起来像这样：

            <table style="width:100%" class="fixed">
            <tr>
                <th>
                    <h4><u><b>PushPin Description</b></u></h4>
                    {% for description,  url_value in zip(pushPinDescription, url) %}
                        <li class="list-group-item"><font size="2"><a href={{url_value}}><b>{{description}}</b></a></font> </li>
                    {% endfor %}
                </th>

                <th>
                    <h4><u><b>Corkboard</b></u></h4>
                    {% for title in corkboardTitle %}
                        <li class="list-group-item"><font size="2"><b>{{title}}</b></font> </li>
                    {% endfor %}
                </th>
            </tr>
            <tr>
            </table>

但是，当描述中的值被填充时。所有框都正确对齐。即使描述为空，如何使框对齐？

Answer 1

您需要为空单元格添加或可以添加 .list-group-item {     最低高度：50像素； }

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
 <table style="width:100%" class="fixed">
            <tr>
                <th>
                    <h4><u><b>PushPin Description</b></u></h4>
                        <li class="list-group-item"><font size="2"><a href={{url_value}}><b>&nbsp;</b></a></font> </li>
                        <li class="list-group-item"><font size="2"><a href={{url_value}}><b>{{description}}</b></a></font> </li>
                        <li class="list-group-item"><font size="2"><a href={{url_value}}><b>{{description}}</b></a></font> </li>
                        <li class="list-group-item"><font size="2"><a href={{url_value}}><b>{{description}}</b></a></font> </li>

                </th>

                <th>
                    <h4><u><b>Corkboard</b></u></h4>
                        <li class="list-group-item"><font size="2"><b>{{title}}</b></font> </li>
                        <li class="list-group-item"><font size="2"><b>{{title}}</b></font> </li>
                        <li class="list-group-item"><font size="2"><b>{{title}}</b></font> </li>
                        <li class="list-group-item"><font size="2"><b>{{title}}</b></font> </li>
                </th>
            </tr>
            <tr>
            </table>