confusion in th and tr tags functionality

StackOverflow https://stackoverflow.com/questions/23680929

  •  23-07-2023
  •  | 
  •  

Domanda

I've the below code in my html table.

<table>
<tbody>
    <thead>
        <tr>
            <th align="right" colspan="4">
                <span class="font-style-bold">SCHEDULE OF RATES</span>
            </th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Unit</span>
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Rate $</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                    <span class="font-style-boldunderline">ROOFER</span>
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
        </tr>
        <tr>
    </tbody>
</tbody>

here is the css

  .frame-all thead th {
margin-top: 0em;
padding-left: 0.2em;
padding-bottom: 0.2em;
}

when i run this i get the below screen.

enter image description here

when i change the th to td, i'm getting the below screen(which is what i want). just want to know why the difference and, can't this case be possible with th

enter image description here

È stato utile?

Soluzione

There can be only one thead and tbody in a table. Both should be direct children of the <table> tag.

<table>
  <thead>
    <tr>
      <th align="right" colspan="4">
        <span class="font-style-bold">SCHEDULE OF RATES</span>
      </th>
    </tr>
    <tr>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Unit</span>
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Rate $</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
          <span class="font-style-boldunderline">ROOFER</span>
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
    </tr>
  </tbody>
</table>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top