Question

我在div中有一个表格，我已经将div设为16px高度，但是即使我已经将内联样式设置为16px，并且如果我提供超过25px的内联样式表，则表格占用25px，然后它适用。

代码：

＆＃13;

table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 10px 0;
  border-collapse: separate;
}

td {
  overflow: hidden;
}

＆＃13;

<div style="height: 16px;
     overflow: hidden;
     text-overflow: ellipsis;">
  <table>
    <tbody>
      <tr>
        <td style="width: 160px;">
          <div style="white-space: nowrap;padding-left: 20px;">
          </div>
        </td>
        <td style="width: 100px;">
          <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <div>Actyve</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

您需要将border-spacing设置为0，填充为0 下面的代码最终得到的表是16px

<div style="
height: 16px;
">
<table style="
height: 16px;
border-spacing: 0px;
border-collapse: collapse;
">
<tbody>
<tr>
<td style="width: 160px;">
<div style="white-space: nowrap;padding-left: 20px;">
</div>
</td>
<td style="width: 100px;height: 16px;padding: 0;">
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div style="
height: 16px;
">Actyve</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

你的div的高度绝对是16px，但这并不意味着你的桌子也需要16px，它的高度取决于它的内容，它会在视觉上溢出你的div，除非你设置你的div overflow:hidden。

我已经为表格和容器div添加了背景，以便您可以更好地查看它，并添加了关于您的高度来自原始代码的说明。

＆＃13;

    <div style="height: 16px; background: pink;">
          <table style="background: rgba(100,100,100, 0.5);">
            <tbody>
              <tr> <!-- affected by browser's default border-spacing -->
                <td  style="width: 160px;">
                  <div style="white-space: nowrap;padding-left: 20px;">
                  </div>
                </td>
                  <td  style="width: 100px;"> <!-- affected by browser's default border-spacing: 2px and padding: 1px -->
                  <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  <div>Actyve</div> <!-- this is taking 18px -->
                </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

＆＃13;

您可以阅读有关边距here

的更多信息

你应该做些什么来强制你的桌子是16px是：

＆＃13;

<div style="height: 16px; background: pink;">
          <table style="background: rgba(100,100,100, 0.5);  border-spacing: 0px;">
            <tbody>
              <tr> <!-- affected by new border-spacing -->
                <td  style="width: 160px; padding: 0px;">
                  <div style="white-space: nowrap;padding-left: 20px;">
                  </div>
                </td>
                  <td  style="width: 100px; padding: 0px;"> <!-- affected by new border-spacing and padding -->
                  <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  <div style="height: 16px;">Actyve</div> <!-- this is now taking 16px you might want to change font size instead -->
                </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

＆＃13;

表格标签比父母div提到的高度更高

2 个答案: