How to Fix Height of TR?

html

responsive-design

css

table-layout

byAnton Shumikhin·Feb 17, 2025

Set a fixed height for <tr> by styling <td> and <th> elements with a CSS class. Use the height property and consider the line-height for alignment. Here's your quick fix:

.fixed-height-cell {
  height: 50px; /* Because not all cells should reach for the sky */
  line-height: 50px; /* Vertical alignment: because being in the middle of things isn't always bad */
}

Apply directly within your table cells as such:

<tr>
  <td class="fixed-height-cell">Data 1</td>
  <td class="fixed-height-cell">Data 2</td>
</tr>

This ensures a consistent height, even with varying content. But we can go deeper: to prevent content overflow, wrap the content in each td with a <div> and set its height to 100% and overflow to hidden.

.fixed-height-div {
  height: 100%;
  overflow: hidden; /* Because no one likes a show-off */
}

Embed this in your HTML:

<td>
  <div class="fixed-height-div">Overflow content here</div>
</td>

Optimizations for fixed height table rows

Implementing DIVs for height control

Using <div> elements within <td> provides a very effective overflow control for larger content, keeping a consistent appearance.

Consistent layout with table-layout: fixed

A unique requirement for IE7 support? Achieve consistent column widths and row heights by applying table-layout: fixed; to your <table> element.

Maximum height with scrolling access

Use the max-height property along with overflow-y: auto; for any lengthy cell content. This approach ensures that content height is kept in check while remaining accessible through scrolling.

Precise content placement

Enhance your layout to the next level with absolute positioning inside relatively positioned table cells, delivering precise and sharp look.

Responsive table designs

When widths get adjusted with viewport size, ensure table dimensions remain intact by applying min-widths to your <tr> or <td> elements.

Aligning text vertically

In cases where content height is less than the cell height, the vertical-align property centers your text creating a neater design:

.fixed-height-cell {
  vertical-align: middle; /* The cool kids sit in the middle */
}

Flexible font sizes within cells

Design calls for it - adjust font-size to match your cell's height. This fosters better readability across devices with different screen sizes.

Handling page resizing

In responsive designs, tables adjust with viewport size. Use a min-width to ensure cell content comfortably fits, thereby keeping row heights consistent amidst resizing.

Overflow management

Wrapping cell content in a <div> and limiting height with hidden overflow helps to control your table row height. It's like fitting a square peg in a round hole, but easier!