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

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

<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 таблица не имеет границ ни в одной ячейке.

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

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

table { border-collapse:collapse }

добавить CSS:

td, th {
   border:none;
}

Измените свой 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;
}

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

td {
 border-style : hidden!important;
}

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

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

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

table td { border:0; }

приведенное выше эквивалентно установке cellpadding = "0"

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

Попробовав приведенные выше предложения, единственное, что сработало для меня, - это изменение атрибута границы на «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;
}

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

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

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