• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1787
  • Last Modified:

Table Padding problem in Firefox

I want to give gap of 10 px between rows. One way to do this is to use an extra <tr> after every row with height=10.
Other approach is to use style="padding-bottom:10;" in <tr>. But when i use this in <table> it works with IE only not with Firefox.
I have this code, any solution to this?

<table border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10;">
      <tr><td>Row 1</td></tr>
      <tr><td>Row 2</td></tr>
      <tr><td>Row 3</td></tr>
</table>
0
php_beginner
Asked:
php_beginner
3 Solutions
 
tdterryCommented:
Don't forget the unit on your sizing elements.  10px not just 10!  Firefox doesn't seem to allow padding on <tr> and it doesn't allow margins on <tr> or <td>.  

My first suggestion would be to put the padding on the <td>.  This will expand the <td> (hiding the <tr> and <table> behind it):

<table border="0" cellpadding="0" cellspacing="0">
     <tr><td style="padding-bottom:10px;">Row 1</td></tr>
     <tr><td style="padding-bottom:10px;">Row 2</td></tr>
     <tr><td style="padding-bottom:10px;">Row 3</td></tr>
</table>

Second, you could add a <span> or <p> inside <td>, and put the margin on that.  That will allow the <tr> or <table> to show through in those 10 pixels:

<table border="0" cellpadding="0" cellspacing="0">
     <tr><td><span style="margin-bottom:10px">Row 1</span></td></tr>
     <tr><td><span style="margin-bottom:10px">Row 2</td></span></tr>
     <tr><td><span style="margin-bottom:10px">Row 3</td></span></tr>
</table>

You could also use line-height on the <table>, but that would affect EVERY line, not just the last line of each element:

<table border="0" cellpadding="0" cellspacing="0" style="line-height:1.75">
     <tr><td>Row 1</td></tr>
     <tr><td>Row 2</td></tr>
     <tr><td>Row 3</td></tr>
</table>
0
 
Artform04Commented:
This might do what you want, if I read correctly

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
      <style type="text/css">
            .rowpad tr td
            {
                   padding-bottom:10px;
            }
      </style>
</head>
<body>
      <table border="1px" class="rowpad">
           <tr><td>Row 1</td></tr>
           <tr><td>Row 2</td></tr>
           <tr><td>Row 3</td></tr>
</table>
</body>
</html>
0
 
php_beginnerAuthor Commented:
tdterry, i meant to say <td> not the <tr>. sorry for the typo.

<span> and line-height solution is not working.

Artform04,
I have table inside every <td>, your class affect on every <td> on inner tables giving some extra height.
0
 
nltechCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table Cell Spacing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* just some visual aides */
body {background:#ccc;}
td, p, table {margin:0;padding:0;border:0 none;}
td {vertical-align:top;}
table {width:400px;}
.row1 {background:#ffc;}
.row2 {background:#fcf;}
.row3 {background:#cff;}
.row4 {background:#cfc;}
/* the nitty gritty */
.bottomborder td {border-bottom:10px solid #333;}
.borderspacing {background:#369;border-spacing:0 10px;border-collapse:separate;}
</style>
</head>

<body>
<table class="bottomborder">
    <tr class="row1">
        <td><p>td bottom-border of 10px</p></td>
        <td><p>which can be colored same as</p></td>
        <td><p>page to 'hide' them.</p></td>
    </tr>
    <tr class="row2">
        <td><p>A line of much much longer text here.</p></td>
        <td><p>A line of much much longer text here.</p></td>
        <td><p>A line of much much longer text here.</p></td>
    </tr>
    <tr class="row3">
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
    </tr>
    <tr class="row4">
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
    </tr>
</table>

<p>&nbsp;</p>
<table class="borderspacing">
    <tr class="row1">
        <td><p>IE doesn't support</p></td>
        <td><p>the border-spacing used</p></td>
        <td><p>in this table</p></td>
    </tr>
    <tr class="row2">
        <td><p>A line of much much longer text here.</p></td>
        <td><p>A line of much much longer text here.</p></td>
        <td><p>A line of much much longer text here.</p></td>
    </tr>
    <tr class="row3">
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
    </tr>
    <tr class="row4">
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
        <td><p>A line of text.</p></td>
    </tr>
</table>
</body>
</html>
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now