why the border of thead element doesn't display in the browser?-CodePudding

in this code ,I set a style for border of thead element , but my problem is that the border doesn't display in the browser at all. what should i do?,please help me.thank you.

thead {
  border: 3px solid red;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TEST</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>EXAM</th>
        <th>RATE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>MATH</td>
        <td>17.50</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>TOTAL</td>
        <td>17.50</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

CodePudding user response：

You cant actually add a border to the thead Element as that element exists but has no "physical representation" when beign rendered. thead and tbody are semantical only elements but you cant actually style them properly.

Id recommend moving the border to the tr childs of your thead and configure your tables border-collapse behaviour instead:

table {
  border-collapse: collapse;
}

table thead tr th {
  border: 3px solid red;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TEST</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>EXAM</th>
        <th>RATE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>MATH</td>
        <td>17.50</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>TOTAL</td>
        <td>17.50</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>