SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin between table rows?

    How can I add margin (not padding) between table rows, without also adding it between the columns?

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <table cellspacing="3" ...

    Or are you looking for CSS only?

  3. #3
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use margin-top margin-bottom for the TR tag (I think it should work)

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cellspacing introduces "margin" all around the cell. I want just to the bottom.

    Unfortunately margin-bottom for the TR (or even TD) tag has no effect

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't apply margins to table rows or td's I'm afraid. You could apply a border to the tr's in firefox which would give some spacing but it won't work in IE.

    I think the only cross browser way to do this is to use nested tables (god forbid).

    Assuming this is tabular data then something like this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    table{
        width:50&#37;;
        padding:0;
        border-collapse:collapse;
        text-align:center;
    }
    table table{width:100%}
    td{    padding:5px 0;}
    td td{padding:0;border:1px solid #000}
    
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><table>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                </table></td>
        </tr>
        <tr>
            <td><table>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table></td>
        </tr>
        <tr>
            <td><table>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table></td>
        </tr>
        <tr>
            <td><table>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table></td>
        </tr>
        <tr>
            <td><table>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table></td>
        </tr>
    </table>
    </body>
    </html>
    Although I suspect that the method above won't be much use if the cell widths are dependent on content.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems strange that with CSS you can have such a fine control on most things but it is impossible to add some margin on a row.

    Thanks for your help

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Seems strange that with CSS you can have such a fine control on most things
    You can use border-spacing but it isn't supported by IE so its not much use at the moment.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    table {
        border-collapse:separate;
        padding:0;
        width:50&#37;;
        border-spacing:0 10px;
    }
    td,th {
        border:1px solid #000;
        border-right:none;
    }
    td:last-child,th:last-child{border:1px solid #000;}
    
    </style>
    </head>
    
    <body>
    <table>
        <tr>
            <th scope="col">1</th>
            <th scope="col">2</th>
            <th scope="col">3</th>
            <th scope="col">4</th>
            <th scope="col">5</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use border-spacing but it isn't supported by IE so its not much use at the moment.
    Thanks Paul. I guess I will just use some html hack for now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •