views:

36

answers:

3
<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Here's what the padding looks like. See how the td inside isn't affected. What's the solution? Table Row Padding Issue

A: 

give the td padding

Moin Zaman
Only thing is the if there is 2 td inside a tr then there will be padding between the 2 td, which I don't want.
Spencer
A: 

<p> inside <td> is messing up the formatting. Try removing it.

Sidharth Panwar
tried removing the paragraph tag and even the heading 2 tag and it didn't work
Spencer
+3  A: 

the trick is to give padding on the tds, but make an exception for the first. (yes, it's hacky, but sometimes you have to play by the browser's rules)

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child is relatively well supported: http://www.w3schools.com/css/pr_pseudo_first-child.asp

You can use the same reasoning for the horizontal padding by using tr:first-child td.

Joeri Hendrickx