Border-collapse not removing table header cells borders

Question

I have a table (for tabular data, not for layout), and I want no borders to be visible in the table header. As far as I know, the way to do it is to specify border-collaps: collapse; in the CSS. However, borders were still visible after this in my case.

I searched this site, tried the various solutions that have been suggested here (e.g. border-spacing: 0px, display: none) but nothing worked. The borders are still there.

The code in my CSS now looks like this:

.tableStyle2 {
    border-spacing: 0px;
}

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

.tableStyle2 tr {
    display: none;
}

and the corresponding HTML code is as follows:

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

Any idea of what is causing this, and how is it possible to hide the borders between cells in the table header?

Answer 1

Each of the <td>s determines (and is responsible for) its own border.

.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  */
}