CODEWITHSUNDEEP
htmlcsshtml-tablew3c
Kamafeather
Kamafeather

Reputation: 9875

Why is 'max-width' ignored onto table-cell?

Why does the max-width get ignored in the following table, once I add display: table-row-group to header and body?

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

.header,
.body {
  display: table-row-group;
}
<div class="table">
  <div class="header">
    <div class="row">
      <div class="cell" style="max-width: 4em;">
        content content content content content
      </div>
      <div class="cell">
        content
      </div>
    </div>
    <div class="row">
      <div class="cell">
        content content content content content
      </div>
      <div class="cell">
        content
      </div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">
        content
      </div>
      <div class="cell">
        content
      </div>
    </div>
  </div>
</div>

I want to control the min/max-size of cells into body, setting min-/max-width on the head cells (that doesn't necessarily need two rows as in the snippet).

What is happening here? What prevents the max-width to work?

Upvotes: 0

Views: 1310

Answers (1)

Leonid Volkov
Leonid Volkov

Reputation: 154

“the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” See definition of max-width in the CSS 2.1 spec.

Upvotes: 4

Related Questions