Пограничный коллапс не работает снова

Question

Извините, я знаю, что подобные вопросы задавали раньше, но ни один из предложений в них не работал в моем случае. У меня есть таблица (для табличных данных, а не для макета), и я не хочу, чтобы границы не были видимыми в заголовке таблицы. Насколько я знаю, способ сделать это - указать border-collaps: collapse; в CSS. Однако после этого в моем случае границы были все еще видны. Я искал этот сайт, попробовал различные предлагаемые здесь решения - border-spacing-0px, display-none - но ничего не получилось. Границы все еще существуют. Код в моем CSS теперь выглядит следующим образом:

.tableStyle2 { 
    border-spacing: 0px; 
} 

.tableStyle2 th { 
    background-color: #1B7AE0; 
    border-color: #1B7AE0; 
    border-spacing: 0px; 
} 

.tableStyle2 tr { 
    display: none; 
} 

и соответствующий HTML-код выглядит следующим образом:

<table class = "tableStyle2" width = "100%"> 
<tr> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
</tr> 
</table> 

(. Остальная часть таблицы еще не были написано) Любой идея, что вызывает это и как можно скрыть границы между ячейками в заголовке таблицы?

Answer 1

Каждый из <td> s определяет (и несет ответственность) за свою собственную границу.

.tableStyle2 { 
    border-spacing: 0px; 
    border-collapse:collapse; /* <--- add this so all the internal <td>s share adjacent borders */ 
    border:1px solid black; /* <--- so the outside of the <th> don't get missed */ 
} 

.tableStyle2 th { 
    background-color: #1B7AE0; 
    border-color: #1B7AE0; 
    border-spacing: 0px; /* <---- won't really need this if you have border-collapse = collapse */ 
    border-style:none; /* <--- add this for no borders in the <th>s */ 
} 

.tableStyle2 tr { 
    /* display: none; <--- you want to show the table */ 
}