Question

我有以下代码。由于某些原因，当工作台高度小于单元格的高度时，不会考虑高度。那是为什么？

＆＃13;

.table {
        border: 1px solid red;
        box-sizing: border-box;
        display: table;
        height: 15px;
      }
      .cell {
        height: inherit;
        border-width: 0;
        display: table-cell;
      }
      .cell span {
        display: inline-block;
        width: 31px;
      }

＆＃13;

    <body>
      <div class="table">
        <span class="cell">
          <span>test1</span>
        </span>
        <span class="cell">
          <span>test2</span>
        </span>
      </div>
    </body>

＆＃13;

Answer 1

由于您使用<div>和<span>元素模拟表格，因此您继承了一些浏览器CSS样式，即line-height。

定义等于表格高度的font-size，然后将子元素的line-height设置为1em。

.table {
    border: 1px solid red;
    box-sizing: border-box;
    display: table;
    height: 15px;
  }
  .cell {
    height: inherit;
    border-width: 0;
    display: table-cell;
    box-sizing: border-box;
    line-height: 15px;
  }
  .cell span {
    display: inline-block;
    width: 31px;
    line-height: 15px;
  }

<div class="table">
    <span class="cell">
      <span>test1</span>
    </span>
    <span class="cell">
      <span>test2</span>
    </span>
  </div>

Answer 2

表格单元格和表格高度仅是初始建议。在某种程度上同样的事情发生在宽度上。如果单词的内容在宽度上不能进一步缩小，那么表格将会变得合适。

在桌面样式元素上使用时，将其视为最小高度。

如果您希望内部的内容具有最大高度，您需要在最终的子跨度内设置高度和溢出等。

Answer 3

display: table与<table>元素的工作方式相同。

height的{{1}}由其单元格的<table>确定。

如果您要将height的{{1}}属性更改为.table，display的高度将生效。

block

.table

显示表高度并不总是受到尊重

3 个答案: