Setting HTML Table Row Height: Differences Between line-height and height Properties

Problem Background and Phenomenon Analysis

Controlling row height is a frequent requirement in HTML table development. The user's code example displays a table with two rows, each containing three cells:

<table class="topics">
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

The user observed excessive spacing between rows and sought to reduce it. The initial attempt used CSS to set height: 14px:

.topics tr { height: 14px; }

However, this setting did not produce the expected effect, and the row height remained at its default value.

Core Solution: The line-height Property

According to the highly-rated Stack Overflow answer, the correct solution is to use the line-height property:

.topics tr { line-height: 14px; }

The line-height property controls the height of text lines, directly affecting the vertical spacing of content within table cells. When set to 14px, the text line height is compressed, thereby reducing the overall row height.

In-Depth Technical Principles

Difference Between height and line-height:

• The height property defines the content area height of an element, but for table rows (<tr>), browsers typically ignore directly set height values and automatically calculate row height based on content
• The line-height property controls the height of line boxes, directly influencing the vertical layout of inline elements. In tables, cell content is defaultly inline or inline-block, making line-height effective for row height control

Practical Effect Verification:

After applying line-height: 14px, the actual height of table rows is calculated as:

Row Height = line-height + top/bottom padding + top/bottom border

In the user's example, the cell's padding: 0 5px 0 0 only sets right padding, so vertical padding is 0, and row height is primarily determined by line-height.

Related Technical Extensions

Minimum Row Height Constraints:

Reference Article 1 mentions that in certain frameworks like Perspective, table rows have minimum height constraints (e.g., 30px). Even if a smaller height or line-height is set, the actual row height will not fall below this minimum. This is for performance optimization, especially in virtualized tables.

Browser Compatibility Considerations:

Different browsers may handle table row heights differently. Reference Article 1 notes that some solutions work well in Chrome but may cause issues like misaligned column headers in Safari. Developers need to conduct cross-browser testing.

Alternative Approach Comparison:

• Setting Cell Height: Directly setting the height property on td or th elements can be more reliable
• Using min-height: In some cases, min-height is more effective than height
• Adjusting Font Size: Reducing font-size can indirectly decrease row height but may affect text readability

Best Practice Recommendations

Based on this analysis and experiences from reference articles, the following best practices are recommended:

1. Prioritize line-height: For simple row height control, line-height is the most direct and effective method
2. Consider Content Integrity: Setting excessively small row heights may cause text truncation or overlap; ensure content remains readable
3. Test Cross-Browser Compatibility: Verify row height settings across different browsers
4. Understand Framework Limitations: When using specific UI frameworks, consult documentation for special handling of row heights

Conclusion

Controlling HTML table row height is a seemingly simple yet complex issue involving interactions between multiple CSS properties. The line-height property, due to its direct impact on line boxes, is more effective than the height property for controlling table row heights. Developers must understand how different properties work and choose the most appropriate solution based on specific requirements and environmental constraints.