[SOLVED] Space padding after the row containing the longest text in a HTML table column

Space padding after the row containing the longest text in a HTML table column

I have an HTML table with multiple columns.

A column might have the longest text somewhere in the middle of the table. Whichever row has the longest text, I would like to give a padding of say 5px to the right so that the text from the next column on the same row does not start immediately after.

And I would like to do this for every column in the HTML table.

Is it possible to do this at the table level instead of doing it in every row? How can I achieve this? Please help!

Sample table:

<!DOCTYPE html>
<html>
<body>
<table>
<tr><td>lengthy text</td><td>123</td><td>No</td></tr>
<tr><td>lengthiest text</td><td>123</td><td>No</td></tr>
<tr><td>lengthier text</td><td>123</td><td>No</td></tr>
</table>
</body>
</html>

Solution

As far as I know, it is not really possible to add padding to just the longest row; you can however add padding to all <td> elements:

<html>
<head>
<style>
table tr td {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>
<body>
.... (your table code here)

Or, if you know that the first row will always contain the longest text, you may add padding only there:

<head>
<style>
table tr td:first-child {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>

For more information, see the documentation on CSS padding and CSS selectors.