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

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

10 72
html css html-table

10 ответов:

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

table { border-collapse:collapse }
180

измените свой 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, th {
   border:none;
}
10

установить таблицы 0.

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

6

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

td {
 border-style : hidden!important;
}
2

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

table td { border:0; }

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

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

1

после того, как я попробовал приведенные выше предложения, единственное, что сработало для меня, это изменение атрибута границы на "0" в следующих разделах стиля дочерней темы.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;
}
1

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

0

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

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

-1
<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>
-2