Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table's Getting 1px of Unwanted Padding

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>
like image 862
JacobTheDev Avatar asked Jul 11 '11 17:07

JacobTheDev


People also ask

How do I remove TD padding in HTML?

The pre-CSS way to remove cellpadding and cellspacing from tables was to set the table cellpadding and cellspacing attributes to zero. However it's a nuisance to have to do this to all tables and it's easier to do this with CSS.

Why padding is not working in table?

This is the reason why; From MDN, to use padding in tables, you need to have border-collapse: separate; so as to allow for the use of border-spacing because border-spacing is a factor in the calculation of distance between the outer table edge and the edge of the outer cells (see quotes from MDN below).


1 Answers

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

like image 96
prodigitalson Avatar answered Sep 18 '22 05:09

prodigitalson