html - 表格获得 1px 的不需要的填充

标签 html css html-table margin padding

出于某种原因,我在表格上得到了 1px 的填充或边框。我不知道如何摆脱它。我试过添加 display:block;margin:0;padding:0;到图像,但这并不能解决问题。我也试过 <table border="0">border:none;在 CSS 中。对于我的生活,我无法弄清楚。

这是一个问题的原因是因为我试图让图像与 tr 两边的边缘对齐,给它圆 Angular 的边框,因为 CSS3 border-radius 在 TR 上不起作用。我添加了 table, table * {border:1px solid red;}到 CSS,从那里,它看起来绝对像是填充或边距问题。

问题出在这张图片中:

在左侧和右侧,您可以看到图像和表格边缘之间有某种填充或其他东西。红色边框只是为了看到这一点。

这是我的 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;
                }

和 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">

关于html - 表格获得 1px 的不需要的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6653984/

相关文章:

html - 从外部表格边框线填充

html - 如何修复 css 导航闪烁问题

HTML 有序列表 1.1、1.2(嵌套计数器和范围)不起作用

html - Ascii 字符代码在浏览器中显示为文本

javascript - JQuery CSS 选择器语法错误?

html - 如何使两个表行之间的空间变小 css

javascript - 使用 ng-repeat 填充 "x - available elements"的剩余元素

javascript - 将多个数组的每一项平均到一个数组中

javascript - 在右边隐藏可变宽度元素

java - 如何使用父标记对象查找内部子标记名列表