如何设置display: table-cell状态下表格单元格的高度？

Absolutely! You can set a height on a <td> element that uses display: table-cell—your proposed code will work in most scenarios, but there are a few table layout quirks to keep in mind:

First, let's confirm: your initial code snippet

td {
  display: table-cell;
  height: 25px;
  max-height: 25px;
}

will work perfectly if your cell content doesn't exceed the 25px height. The cell will maintain your specified height as expected.

The catch with max-height on table cells #

Here's the gotcha: max-height doesn't behave like you'd expect on table-cell elements by default. If your cell's content is taller than the height you set, the table cell will automatically expand to fit all the content—completely ignoring the max-height value. This is because table layout prioritizes displaying all content over strict height constraints.

How to enforce a fixed height (even with overflow) #

If you need to guarantee the cell stays at 25px no matter how long the content is, wrap the cell's content in an inner container and apply the height/overflow rules to that container instead:

td {
  display: table-cell;
  height: 25px;
  vertical-align: top; /* Optional: control how content aligns within the cell */
}

td .cell-inner {
  height: 25px;
  max-height: 25px;
  overflow: hidden; /* Hide overflow, or use 'auto' to add a scrollbar */
}

Corresponding HTML structure:

<td>
  <div class="cell-inner">Your calendar content here—even long text will be clipped to 25px</div>
</td>

Quick recap #

• If your calendar cell content will always be shorter than 25px, your original code is sufficient (you can even omit max-height since it won't have any effect here).
• If you need to prevent the cell from expanding with longer content, use an inner container paired with overflow to clamp the height.

内容的提问来源于stack exchange，提问作者Achut Bvs