Как сделать границы таблицы невидимыми с помощью CSS

Question

Я знаю, что это часто задаваемый вопрос, но я пробовал некоторые решения (например, Как сделать так, чтобы разделительные линии / границы в таблице исчезали с помощью CSS? ), но я все еще могу ' не совсем понял.

Я определил через css структуру таблицы с чередующимися цветами строк. Мне бы хотелось, чтобы (в частности, вертикальные) границы между ячейками были невидимыми, и поэтому предположим, что мне либо нужна нулевая ширина границы td, либо чередующиеся цвета границы td, которые должны совпадать с цветами фона.

Пример ниже - это то, что я пробовал, вызывая идентификатор table1 из html, я получаю хорошую таблицу строк чередующегося цвета, но с очевидными границами ячеек - спасибо за помощь.

#table1 table, tr, td, th {
     border: 0;
}

#table1 tbody tr:nth-child(odd) {
     background-color: #A3B9D2; 
}

#table1 tbody tr:nth-child(even) {
     background-color: #E7EDF3;
}

, а затем образец HTML;

<table id="table1" >
   <tr>
     <td>Test</td><td>(value)</td>
   </tr>
   <tr>
     <td>Test2</td><td>(value2)</td>
   </tr>
</table>

Answer 1

Вполне возможно, что то, что вы описываете, это сотовое пространство.Если это так, попробуйте это в своем HTML:

<table cellpadding="0" cellspacing="0" border="0">
  ...
</table>

Пространство ячеек относится к пространству между ячейками;это не граница точно.Итак, если вы видите невидимые или неокрашенные пробелы между вашими tds, попробуйте добавить атрибут cellspacing = "0" в тег таблицы.

Answer 2

Использование cellspacing="0" действительно верный способ избавиться от этих надоедливых линий.Но лично мне это никогда не нравилось - потому что я должен применять его в каждой таблице, которую я создаю по всему сайту, а не в одном аккуратном централизованном месте.

Итак, я обычно иду нарешение как elclanrs в файле CSS.Крутая вещь в этом решении состоит в том, что вы можете удалить некоторые теги перед ним, чтобы применить линии / границы только для них.

Таким образом, другими словами, чтобы поставить рамку вокруг таблицы - без необходимостииз ячеек, разделенных между строками - вы можете сделать что-то вроде этого:

tr, td, th
{
  border: 0;
}

Удачи!

Answer 3

Вы также можете использовать этот стиль:

#table1 {border:0px solid transparent;} 

Answer 4

Попробуйте это

#table1 {
   border-collapse: collapse;
}

Answer 5

#table1 table, tr, td, th {} неверно.

Вы должны сделать:

#table1,
#table1 tr,
#table1 td { border: 0; }

Answer 6

Попробуйте это:

table,td,tr,th{
  border:0;
}

Answer 7

Какой браузер вы используете? Для полной обратной совместимости вам все еще нужен атрибут cellspacing="0", установленный в таблице.

http://jsfiddle.net/RmhxH/

Answer 8

Кажется, что вы применяете стиль к таблицам в table1.На самом деле первое объявление должно быть:

# table1 {border: 0;}

или

table # table1 {border: 0;}