Table headers and column mis-aligned-CodePudding

The data in the column does not align with the headers.

I have tried to set the display in the head to

 display: table-header-group;

to no avail.

Thanks

  table {
  border-collapse: collapse;
  margin: 25px;
  font-size: 0.9em;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: bisque;
  table-layout: fixed;

  thead {
    border: 1px solid black;
    display: table-header-group;

    tr {
      background-color: #009879;
      color: white;
      font-weight: bold;
      text-align: left;
    }
  }
  tbody {
    tr:nth-of-type(even) {
      background-color: whitesmoke;
    }
  }
}

<table>
    <thead>
      <tr>
        <th id="monthName">Months</th>
          <th  colspan="2">June</th>
          <th  colspan="2">July</th>
          <th  colspan="2">August</th>
          <th  colspan="2">September</th>
          <th  colspan="2">October</th>
          <th  colspan="2">February</th>
          <th  colspan="2">March</th>
          <th  colspan="2">April</th>
          <th  colspan="2">January</th>
          <th  colspan="2">May</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td >x</td>
            <td >95</td>
            <td >73</td>
            <td >73</td>
            <td >56</td>
            <td >63</td>
            <td >68</td>
            <td >80</td>
            <td >86</td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
          <td >y</td>
            <td >68</td>
            <td >85</td>
            <td >64</td>
            <td >56</td>
            <td >96</td>
            <td >100</td>
            <td ></td>
            <td ></td>
            <td >89</td>
            <td >79</td>
        </tr>
        <tr>
          <td >z</td>
            <td >61</td>
            <td >59</td>
            <td >86</td>
            <td >44</td>
            <td >86</td>
            <td >65</td>
            <td ></td>
            <td >73</td>
            <td >51</td>
            <td >92</td>
        </tr>
    </tbody>
  </table>

I tried to align the content of the body to the headers so that it looks like a spreadsheet but the answers get bunched together.

CodePudding user response：

Your use of colspan="2" is making the header row 21 columns wide (1 10*2), when your three data rows are 11 columns wide.

CodePudding user response：

Remove colspan,

I hope, It will help you

<table>
  <thead>
    <tr>
      <th id="monthName">Months</th>
        <th >June</th>
        <th >July</th>
        <th >August</th>
        <th >September</th>
        <th >October</th>
        <th >February</th>
        <th >March</th>
        <th >April</th>
        <th >January</th>
        <th >May</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td >x</td>
          <td >95</td>
          <td >73</td>
          <td >73</td>
          <td >56</td>
          <td >63</td>
          <td >68</td>
          <td >80</td>
          <td >86</td>
          <td ></td>
          <td ></td>
      </tr>
      <tr>
        <td >y</td>
          <td >68</td>
          <td >85</td>
          <td >64</td>
          <td >56</td>
          <td >96</td>
          <td >100</td>
          <td ></td>
          <td ></td>
          <td >89</td>
          <td >79</td>
      </tr>
      <tr>
        <td >z</td>
          <td >61</td>
          <td >59</td>
          <td >86</td>
          <td >44</td>
          <td >86</td>
          <td >65</td>
          <td ></td>
          <td >73</td>
          <td >51</td>
          <td >92</td>
      </tr>
  </tbody>
</table>

CodePudding user response：

table {
  border-collapse: collapse;
  margin: 25px;
  font-size: 0.9em;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: bisque;
  table-layout: fixed;
   }


  thead {
    border: 1px solid black;
    display: table-header-group;
    width: 50px;
     }

    tr {
      background-color: #009879;
      color: white;
      font-weight: bold;
      text-align: center;
    }
  
  
  td {
  display: table-cell;
  width: 50px;
  text-align: center;
}

  tbody {
    tr:nth-of-type(even) {
      background-color: whitesmoke;
    }
  }

<table>
    <thead>
      <tr>
        <th id="monthName">Months</th>
          <th  >June</th>
          <th  >July</th>
          <th  >August</th>
          <th  >September</th>
          <th  >October</th>
          <th  >February</th>
          <th  >March</th>
          <th  >April</th>
          <th  >January</th>
          <th  >May</th>
      </tr>
    </thead>
    <tbody>
        <tr>

          <td >x</td>

            <td >95</td>
            <td >73</td>
            <td >73</td>
            <td >56</td>
            <td >63</td>
            <td >68</td>
            <td >80</td>
            <td >86</td>
            <td ></td>
            <td ></td>

        </tr>
        <tr>

          <td >y</td>

            <td >68</td>
            <td >85</td>
            <td >64</td>
            <td >56</td>
            <td >96</td>
            <td >100</td>
            <td ></td>
            <td ></td>
            <td >89</td>
            <td >79</td>

        </tr>
        <tr>

          <td >z</td>

            <td >61</td>
            <td >59</td>
            <td >86</td>
            <td >44</td>
            <td >86</td>
            <td >65</td>
            <td ></td>
            <td >73</td>
            <td >51</td>
            <td >92</td>

        </tr>
        
        
        
        
        
        

    </tbody>
  </table>