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>

---

尝试： <table border="0" cellpadding="0" cellspacing="0">

---

This seemed to fix things for me.

CSS:

table {
    width: 610px;
    border-spacing:0; /* Add this here */
}

---

My issue was some weird behavior, and I had tried all the tricks in the book, but that padding was stubborn. Finally I found out, that the line-height attribute set for the body element, was creating the effect of padding-top . After overriding which, with a localized rule, of

line-height: normal;

...the problem got solved.

链接地址: http://www.djcxy.com/p/16962.html

上一篇: CSS表格cellpadding和cellspacing？

下一篇: 表的获取1px的不需要的填充