By default, the height of the table rows changes according to the data they contain. If the content in the row is large, the table automatically increases the height of the row and if it is small, the table row height automatically becomes lower.
But you might sometimes want to have more height of the table row even if it contains a small amount of data.
With CSS height property, we can very easily set any height of the table row that we need. The height property accepts the height value both in px as well as in %. You can choose any of them according to your need.
In the following example, we have set each table row height to 100px.
Example:
tr{
height: 100px;
}
Set any Specific Table Row Height
You can also set any specific table row height using CSS :nth-child() selector.
For example, if you want to select only the first row, you can use tr:nth-child(1). Similarly, for the second row, you can use tr:nth-child(2) and so on.
In the following example, we have set only the second row height to 100px. The remaining rows will not be affected.
Example:
tr:nth-child(2){
height: 100px; /* Set only 2nd row height to 100px. */
}
