Table obtenant 1px de rembourrage indésirable

Pour une raison que je suis un 1px de remplissage ou de frontière sur une table. Je ne peux pas comprendre comment vous en débarrasser. J'ai essayé d'ajouter display:block;margin:0;padding:0; pour les images, mais ce n'est pas le résoudre. J'ai aussi essayé de <table border="0"> et border:none; dans le CSS. Pour la vie de moi je ne peux pas comprendre cela.

La raison, c'est un problème, c'est parce que j'essaie d'obtenir des images à la ligne avec les bords sur les deux côtés d'une tr, pour lui donner des bordures arrondies, depuis CSS3 border-radius ne fonctionne pas sur les TR. J'ai ajouté table, table * {border:1px solid red;} pour le CSS, et ça, cela ressemble fort à un padding ou margin question.

La question est dans l'image:

sur les côtés gauche et droit, vous pouvez voir qu'il y a une sorte de rembourrage ou quelque chose entre les images et le bord de la table. La bordure rouge sont là juste pour voir ce.

Voici mon 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;
                }

Et le code 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>

source d'informationauteur JacobTheDev