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

标签 html css

我有下面的代码。出于某种原因,当表格高度小于单元格高度时,不会考虑高度。这是为什么?

.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;
      }
    <body>
      <div class="table">
        <span class="cell">
          <span>test1</span>
        </span>
        <span class="cell">
          <span>test2</span>
        </span>
      </div>
    </body>

最佳答案

表格单元格和表格高度只是初步建议。宽度在一定程度上发生了同样的事情。如果单词的内容不能进一步缩小宽度,表格将增长以适应。

在表格样式元素上使用时,将其视为最小高度。

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

关于html - 显示表格高度并不总是受到尊重,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36987114/

相关文章:

javascript - 单击袋子图标时会显示购物车中添加的商品列表

javascript - 'h1 :nth-child(5)' selects 3rd and not 5th child

html - 仅使用 css 在悬停时覆盖图像

CSS 访问QHeaderView item columns设置background-image,或者设置大图标给QHeaderView

html - 收缩和居中 bootstrap 3 形式

javascript - 表中每一行的显示/隐藏按钮

javascript - 在 PHP 中以数组形式访问无序列表 id 的最简单方法

css - 在 IE9 中水平未对齐的 div 在 FF/IE8/Chrome/Opera/Safari 上正常

javascript - 基于选择菜单使用 jQuery 更改 iFrame src

css - 如何确保内部 div 在其父容器内?