Question

我具有以下表格结构。我这里的桌子里面有桌子。

我的问题是，如果td不包含任何文本，则出于某种原因将全高删除：

这是我的HTML ：（与一些剃须刀混合在一起，在这里并不重要）

<td style="padding:0;margin:0;"class="border border-dark border-dark">
                    <table class=" table-borderless justify-content-center " cellspacing="20" style="height:100%!important;padding:0;margin:0;">
                        <tr style="height:100%; text-align:center;font-size:10px;"class="flex-none">
                                            if (condition)
                                            {
                                                <td style="width:@Percent%; height:100%;" onclick="document.getElementById('EventId_HiddenInput').value='@Model.Events.SingleOrDefault(r => r.EventId == id).EventId';" class="FillModalWithEventData bg-primary flex-md-fill">
                                                    <a onclick="document.getElementById('EventId_HiddenInput').value='@Model.Events.SingleOrDefault(r => r.EventId == id).EventId';" class="FillModalWithEventData">@Model.Events.SingleOrDefault(r => r.EventId == id).Company.ToString()</a>
                                                </td>

                                            }
                                            else
                                            {
                                                <td style="width:@Percent%;height:100%; " onclick="document.getElementById('EventId_HiddenInput').value='@Model.Events.SingleOrDefault(r => r.EventId == id).EventId';" class="FillModalWithEventData bg-primary ">
                                                    <a onclick="document.getElementById('EventId_HiddenInput').value='@Model.Events.SingleOrDefault(r => r.EventId == id).EventId';" class="FillModalWithEventData">filler</a>

                                                </td>
                                            }

                            <td>
                        </tr>
                    </table>
                </td>

如果td为空，如何防止其收缩并将其保持在全高度？

Answer 1

您应该将高度设置为100％，并显示：inline-block;为一个。但是随后文本就会显示出来，但是如果您想在中间插入文本，那么针对您的解决方案是：

display: flex;
height: 100%;
justify-content: center;
align-items: center;

或以px，vh等为td设置一些高度。

Answer 2

一种简单的解决方案是在这些空单元格中添加一个不间断的空格（ ）。

CSS解决方案如下：

table {
  border: 1px solid #000;
  border-collapse: collapse;
}

td {
  font-size: 16px;
  padding: 10px;
}

tr:not(:last-child) td {
  border-bottom: 1px solid #000;
}

td::before,
td::after {
  content: '\00a0'; /* Escaped Unicode representation of a non-breaking space */
}

<table>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

当内容为空时，防止td变小

2 个答案: