Удаление границ нежелательной таблицы с помощью 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 таблица не имеет границ в любой ячейке.

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

Ответы

Ответ 1

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

table { border-collapse:collapse }

Ответ 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;
}

Ответ 3

добавить css:

td, th {
   border:none;
}

Ответ 4

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

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

Ответ 5

чтобы удалить границу, juste используя css, как это:

td {
 border-style : hidden!important;
}

Ответ 6

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

table td { border:0; }

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

И если вы хотите, вы можете что-то подобное

$style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"';

<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>