Problems with tables borders-CodePudding

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;

}

CodePudding user response：

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>

CodePudding user response：

The best way to approach this is to be careful with which CSS selectors you are using, and not use the table selector as a whole. For help with simple table values and alternatives, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content.

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

CodePudding user response：

@remi03 can you try these codes original: bu kodları bir denermisiniz.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
  .baslik th{
    border: solid maroon 2px;
    padding: 0;
  }
  .icerik td{
    border: solid dodgerblue 2px;
    padding: 0;
  }
  </style>
</head>
<body>
  <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>
</body>
</html>