Видалення небажаних меж комірок таблиці за допомогою 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, що використовується для скидання стилів браузера за замовчуванням

Спробувавши наведені вище пропозиції, єдине, що мені вдалося, - це змінити атрибут 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;
}

Спробуйте призначити стилю border: 0px; border-collapse: collapse;елемент таблиці.

іноді навіть після очищення border с.

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