Problems with tables borders

January 7, 2022

I have wierd problem with my table,
As normal I want borders around my Table Heads and Table Cells,
But for some reason it only gives me a border around the whole table.
How can I fix this?

Images and code attached

How it looks

HTML;

                    <table width='100%'>
                    <tr>
                        <th>Maandag</th>
                        <th>Dinsdag</th>
                        <th>Woensdag</th>
                        <th>Donderdag</th>
                        <th>Vrijdag</th>
                        <th>Zaterdag</th>
                        <th>Zondag</th>
                    </tr>

                    <tr>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                    </tr>
                </table>

CSS;

table, th, td {
background-color: white;
border: solid black 3px;

}

>Solution :

The code you posted in your your question does put borders not only around the whole table, but also around every td and th.

I suppose you might not want the cells to have seperate borders. In this case you should apply the borders only to td and th (i.e. the cells) and in addition apply border-collapse: collapse; to the table itself:

table {
  border-collapse: collapse;
}

th,
td {
  background-color: white;
  border: solid black 3px;
}

<table width='100%'>
  <tr>
    <th>Maandag</th>
    <th>Dinsdag</th>
    <th>Woensdag</th>
    <th>Donderdag</th>
    <th>Vrijdag</th>
    <th>Zaterdag</th>
    <th>Zondag</th>
  </tr>

  <tr>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
  </tr>
</table>