HTML & CSS why is my css for boders not being called for table id #t01

[Noobdeveloper]

<!DOCTYPE html>

<html>

<head>

<title> This is a title</title>

<style>

#t02, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

   padding: 10px;

}

th {

  text-align: left;

}

#t01 {

  background-color:black;

  color: white;

  width: 100%;

  text-aligh: left;

  border: 1px solid white;



}



</style>

</head>

<body>

<h2> Basic HTML Table </h2>

<table style="width:100%;">

<caption><b> Members and Age<b> </caption>

<tr>

<th> First Name </th>

<th> last Name </th>

<th colspan="2"> Age </th>

</tr>

<tr>

<td> TEST</td>

<td> TEST</td>

<td> 60 </td>

<td></td>

</tr>

<tr>

<td> TEST</td>

<td> TEST</td>

<td> 49 </td>

<td> </td>

</tr>

<tr>

<td> TEST</td>

<td> TEST</td>

<td> 27 </td>

<td></td>

</tr>

<tr>

<td> TEST</td>

<td> TEST</td>

<td> 25 </td>

<td></td>

</tr>

<tr>

<th></th>

<th></th>

<th rowspan="2">sub-total<hr>total</th>

<td> 161 </td>

</tr>

<tr>

<td></td>

<td></td>

<td> 161</td>

</tr>

</table>

<br>

<br>

<br>

<table id="t01">

<tr>

<th>First Name</th>

<th> Last Name </th>

<th> Age </th>

</tr>

<tr>

<td> TEST</td>

<td> TEST</td>

<td> 23</td>

</tr>

</table>

</body>

</html>

 

[simong1993]

Hey And welcome 😀

The answer to your question is, it is 😀 your telling the table to have a border and not the cells. I have also fixed some of your code that was giving you some issues too and changed the css to do what you was after 😀 and you can find them below via the link 😀

JSFiddle - React, Tailwind, and code Playground

JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML online with JSFiddle.

jsfiddle.net

<html>
  <head>
    <style>
      #t02, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }

      th, td {
      padding: 10px;
      }

      th {
      text-align: left;
      }

      #t01 th,#t01 td {
      background-color: black;
      color: white;
      width: 100%;
      text-align: left;
      border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <h2> Basic HTML Table </h2>

    <table style="width:100%;">
    <caption>
      <b> Members and Age</b>
    </caption>
      <tr>
        <th> First Name </th>
        <th> last Name </th>
        <th colspan="2"> Age </th>
      </tr>
      <tr>
        <td> Naresh</td>
        <td> Prasad</td>
        <td> 60 </td>
        <td></td>
      </tr>
      <tr>
        <td> Vijaylaxmi</td>
        <td> Devi</td>
        <td> 49 </td>
        <td> 51 </td>
      </tr>
      <tr>
        <td> Nidhi</td>
        <td> Gupta</td>
        <td> 27 </td>
        <td></td>
      </tr>
      <tr>
        <td> Aaditya</td>
        <td> Gupta</td>
        <td> 25 </td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th rowspan="2">sub-total<hr>total</th>
        <td> 161 </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td> 161</td>
      </tr>
    </table>
    <br>
    <br>
    <br>
      <table id="t01">
        <tr>
          <th>First Name</th>
          <th> Last Name </th>
          <th> Age </th>
        </tr>
        <tr>
          <td> Aaditya</td>
          <td> Gupta</td>
          <td> 23</td>
        </tr>
      </table>
  </body>
</html>