How to Change the Table Row Height in CSS
In Web pages, tables display data in an easily read format similar to that of a spreadsheet. Since you can use Cascading Style Sheet (CSS) code to change the way any part of a Web page looks, you can also use it to change the height of table rows. Adding class names to table rows you want to target in CSS gives you the ability to write one chunk of CSS code and reuse it on as many table rows as you need. Targeting every row in every table on the page is also possible.
Other People Are Reading
Instructions
-
-
1
Go to the Windows taskbar and enter "Notepad" in to the search box. Alternatively, type the name of a code editor if you installed one on your computer. Navigate to "File" on the top toolbar and open the Web page containing the table.
-
2
Locate the "<head>" tags in your Web page and check if any "<style>" tags already exist there. Add this code between the "<head>" tags if it is not already there:
<style type="text/css">
</style>
-
-
3
Scroll down in the code and look for your table. Wherever you find a table row that needs an adjustment of its height, add a class name:
<tr class="tall">
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
You can reuse class names in HTML and later write one block of CSS code that changes all elements with that same class name.
-
4
Go back to your "<style>" tags and write your CSS code:
.tall {
height: 50px;
}
The above code gives any table row with the class name "tall" a height of 50 pixels.
-
1
Tips & Warnings
You can also target every row in every table on the Web page using this code: tr { height: 20px; }
Always back up your website's files before editing them.
