Question

For some reason I’m getting a 1px padding or border on a table. I can’t figure out how to get rid of it. I’ve tried adding display:block;margin:0;padding:0; to the images, but that doesn’t solve it. I’ve also tried <table border="0"> and border:none; in the CSS. For the life of me I can’t figure this out.

The reason it’s a problem is because I’m trying to get images to line up with the edges on both sides of a tr, to give it rounded borders, since CSS3 border-radius doesn’t work on TR’s. I’ve added table, table * {border:1px solid red;} to the CSS, and from that, it definitely looks like a padding or margin issue.

The issue is in this image:

on the left and right sides, you can see there’s some kind of padding or something between the images and the edge of the table. The red borders are there just to see this.

Here’s my CSS:

table a {
    color: #f7941E;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    /* css3 */
    transition: color .25s;
    -khtml-transition: color .25s;
    -moz-transition: color .25s;
    -o-transition: color .25s;
    -webkit-transition: color .25s;
}

    table a:hover {
        color: #f8ae57;
    }

table {
    width: 610px;
}

    table tr {
        height: 33px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

        table td {
            border-collapse: collapse;
        }

    table tr.head {
        color: #58585a;
        font-family: Rockwell, serif;
        font-size: 18px;
        font-weight: bold;
        text-transform: lowercase;
    }

    table tr.even {
        background: #EEE;
        height: 33px;
    }

        table tr td img {
            padding: 0 15px 0 13px;
            vertical-align: middle;
        }

            table tr td a img {
                opacity: .6;                
                /* css3 */
                transition: opacity .25s;
                -khtml-transition: opacity .25s;
                -moz-transition: opacity .25s;
                -o-transition: opacity .25s;
                -webkit-transition: opacity .25s;
            }

                table tr td a img:hover {
                    opacity: 1;
                }

And the HTML:

<table border="0">
    <tr>
        <td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;">
        <td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td>
        <td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;">
    </td>
</table>

Answer 1

Try: <table border="0" cellpadding="0" cellspacing="0">