Удаление ненужных границ ячеек таблицы с помощью CSS

Question

У меня странная и неприятная проблема. Для простой разметки:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

Я применяю различные значения цвета фона для thead , tr и tr нечетных элементов. Проблема в том, что в большинстве браузеров каждая ячейка имеет нежелательную границу, которая не является цветом какой-либо из строк таблицы. Только в Firefox 3.5 таблица не имеет границ ни в одной ячейке.

Мне бы просто хотелось узнать, как убрать эти границы в других основных браузерах, чтобы единственное, что вы видите в таблице, это цвета чередующихся строк.

Answer 1

Вы должны добавить это в свой CSS:

table { border-collapse:collapse }

Answer 2

Измените ваш HTML следующим образом:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(я добавил border="0" cellpadding="0" cellspacing="0")

В CSS вы можете сделать следующее:

table {
    border-collapse: collapse;
}

Answer 3

добавить немного css:

td, th {
   border:none;
}

Answer 4

Установите атрибут cellspacing таблицы на 0.

Вы также можете использовать стиль CSS, border-spacing: 0, но только если вам не требуется поддержка более старых версий IE.

Answer 5

, чтобы удалить границу, просто используйте css:

td {
 border-style : hidden!important;
}

Answer 6

После того, как я попробовал вышеуказанные предложения, единственное, что сработало для меня, - это изменить атрибут border на «0» в следующих разделах style.css дочерней темы (выполните операцию «Найти», чтобы найти каждый из Ниже приведены только фрагменты):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

После этого выглядело так:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

Answer 7

Вы также можете добавить

table td { border:0; }

вышеизложенное эквивалентно установке cellpadding = "0"

избавляет от заполнения, автоматически добавляемого в ячейки браузерами, что может зависеть от типа документа и / или любого CSS, используемого для сброса стилей браузера по умолчанию

Answer 8

иногда даже после очистки border с.

причина в том, что у вас есть изображения внутри td, поэтому изображения display:block решают его.

Answer 9

Попробуйте назначить стиль border: 0px; border-collapse: collapse; для элемента таблицы.