confusion in th and tr tags functionality

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

  •  23-07-2023
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top