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

87

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

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

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

Боб
источник
2
Спасибо всем, кто предложил добавить border-collapse: collapse в CSS. Это сделало это.
Боб

Ответы:

210

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

table { border-collapse:collapse }
Дуг Найнер
источник
13
Обратите внимание, что это должно применяться к таблице , а не к td . Я просто сделал эту ошибку и потратил больше получаса, пытаясь понять, почему это не работает.
javawizard 05
16

добавить CSS:

td, th {
   border:none;
}
Дэйв Маркл
источник
1
у меня не работает на chrome 60.0.3112.113 при применении к таблице
Абдулла Гейт
15

Измените свой 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;
}
Габриэль Макадамс
источник
12

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

td {
 border-style : hidden!important;
}
Амин_Дев
источник
8

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

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

SLaks
источник
1

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

table td { border:0; }

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

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

falc0n
источник
1
Cellpadding - это пространство между содержимым таблицы и ее границами td{padding:X}. Cellspacing - это расстояние между границами каждой ячейки («отступ» между границами ячеек). Вы можете настроить border-collapseимитацию того, что cellspacingделает атрибут в теге таблицы, но это не надежно.
MetalFrog
1

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

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

Джош Андерсон
источник
3
@ Джош, не так ли border: none?
Дуг Найнер
@DougNeiner Старый пост, но ни один, и 0 одинаково действительны. Мне нравится 0, потому что мне нужно меньше печатать :)
Скотт Симонтис
-1

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

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

Bresleveloper
источник