Таблица получает 1 пиксель нежелательного заполнения

По какой-то причине я получаю отступ или границу в 1 пиксель на столе. Я не могу понять, как от этого избавиться. Я пробовал добавить display:block;margin:0;padding:0; к изображениям, но это не решило проблему. Я также пробовал <table border="0"> и border:none; в CSS. Да хоть убей, я не могу этого понять.

Причина, по которой это проблема, заключается в том, что я пытаюсь выровнять изображения с краями по обе стороны от tr, чтобы придать ему закругленные границы, поскольку 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>

html padding css html-table margin
person JacobTheDev    schedule 11.07.2011    source источник
comment
Вы пробовали использовать макет без таблицы? Макеты таблиц не одобряются (начните аргумент здесь).   -  person Blender    schedule 11.07.2011
comment
Почему бы просто не сбросить поля / отступы в CSS для таблиц?   -  person Nightfirecat    schedule 11.07.2011
comment
Никто не спорит, что Blender.   -  person Phil    schedule 11.07.2011
comment
Вам нужно закрыть первый <td> и ваш <tr>   -  person Jrod    schedule 11.07.2011
comment
@Blender, я знаю это, но на самом деле в этой ситуации полезны таблицы. На мой взгляд, то, как они структурированы, позволяет перечислять элементы в CMS. Таблицы в большинстве ситуаций сильно раздражают.   -  person JacobTheDev    schedule 11.07.2011

Ответы (3)


arrow_upward
22
arrow_downward

Попробуйте: <table border="0" cellpadding="0" cellspacing="0">

person prodigitalson    schedule 11.07.2011
comment
Ах! Большое спасибо! Я думал, что мой сброс CSS позаботился об этом, но это исправило его! - person JacobTheDev; 11.07.2011
comment
Этот параметр не рекомендуется в HTML5, но, к счастью, вы можете сделать то же самое в CSS: stackoverflow.com/questions/339923/ - person Alex Ryan; 04.08.2015

arrow_upward
11
arrow_downward

Похоже, это все исправило для меня.

CSS:

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

arrow_upward
1
arrow_downward

Моя проблема заключалась в каком-то странном поведении, и я перепробовал все приемы, описанные в книге, но этот отступ оказался упрямым. Наконец я обнаружил, что атрибут line-height, установленный для элемента body, создает эффект padding-top. После переопределения, которое с помощью локализованного правила

line-height: normal;

... проблема решена.

person Mohd Abdul Mujib    schedule 30.08.2016