html - display table height not always respected

Question

Welcome To Ask or Share your Answers For Others

html - display table height not always respected

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - display table height not always respected

I have the code below. For some reason when the table height is smaller than the height of the cells, the height is not respected. Why is that?

.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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:42:30+0000

Table cell and table heights are only initial recommendations. The same thing to a degree happens with width. If the content of the words can't shrink any further in width the table will grow to fit.

Think of it as a min-height when used on table styled elements.

If you are wanting the content inside to have a maximum height you will want to set the height and overflow, etc. on the final child span inside.

Categories

html - display table height not always respected

html - display table height not always respected

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags