CODEWITHSUNDEEP
html
Wojciech Szabowicz
Wojciech Szabowicz

Reputation: 4198

Html table with nested table and header

I am trying to build complex html table with nested table and headers in main table that will fit nested table, so far I've got:

.module-table {
    border: solid thin;
    border-collapse: collapse;
}

.module-table th {
    vertical-align: middle;
    text-align: center;
    border: solid thin;
}

.module-table-cell {
    border: solid thin;
}
   <table class="module-table module-table-info">
<thead>
    <tr>
        <th rowspan="2">
            ID: 0
        </th>
        <th colspan="2">Modules</th>
    </tr>
    <tr>
        <th>Slot No.</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="module-table-rack-info">
            Row: 0<br>
            Type: Unknown Type
        </td>
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="module-table-cell">1</td>
                        <td class="module-table-cell">Y4BO94QZ17Y3I8</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">3</td>
                        <td class="module-table-cell">RXAL1YSRA0FNWT</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">5</td>
                        <td class="module-table-cell">OFV2FZJE6OCTR0</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">7</td>
                        <td class="module-table-cell">VMNO0XD5GNI5K3</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">9</td>
                        <td class="module-table-cell">M9M5TWUVBY12XR</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">13</td>
                        <td class="module-table-cell">TDWDOOFVD7CD7K</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">15</td>
                        <td class="module-table-cell">MUY6FNX60KK68C</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td class="module-table-rack-info">
            Row: 1<br>
            Type: Unknown Type
        </td>
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="module-table-cell">1</td>
                        <td class="module-table-cell">Y4BO94QZ17Y3I8</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">3</td>
                        <td class="module-table-cell">RXAL1YSRA0FNWT</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">5</td>
                        <td class="module-table-cell">OFV2FZJE6OCTR0</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">7</td>
                        <td class="module-table-cell">VMNO0XD5GNI5K3</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">9</td>
                        <td class="module-table-cell">M9M5TWUVBY12XR</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">13</td>
                        <td class="module-table-cell">TDWDOOFVD7CD7K</td>
                    </tr>
                    <tr>
                        <td class="module-table-cell">15</td>
                        <td class="module-table-cell">MUY6FNX60KK68C</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
</table>

Now as you see nested table does not fit into space where Id like it to be.

What I am trying to do is to fit that nested table under Slot No. and Name header so far no luck, any suggestions?

EDIT:

Using @Quentin suggestion Ive fixed table with popper html tags, but how to make headers fit nested table?

Upvotes: 1

Views: 2787

Answers (2)

Jos&#233; Cristian Fernandez Tirado
Jos&#233; Cristian Fernandez Tirado

Reputation: 364

Try this:

.module-table {
    border: solid thin;
    border-collapse: collapse;
}

.module-table th {
    vertical-align: middle;
    text-align: center;
    border: solid thin;
}

.module-table-cell {
    border: solid thin;
}
.module-table tbody:nth-of-type(odd){
  background-color: lightgray;
}
.module-table-rack-info{
  border-top: 1px solid black;
}
<table class="module-table module-table-info">
  <thead>
    <tr>
      <th rowspan="2">
        ID: 0
      </th>
      <th colspan="2">Modules</th>
    </tr>
    <tr>
      <th>Slot No.</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="module-table-rack-info" rowspan="8">
        Row: 0
      </td>
    </tr>
    <td class="module-table-cell">1</td>
    <td class="module-table-cell">Y4BO94QZ17Y3I8</td>
    <tr>
      <td class="module-table-cell">3</td>
      <td class="module-table-cell">RXAL1YSRA0FNWT</td>
    </tr>
    <tr>
      <td class="module-table-cell">5</td>
      <td class="module-table-cell">OFV2FZJE6OCTR0</td>
    </tr>
    <tr>
      <td class="module-table-cell">7</td>
      <td class="module-table-cell">VMNO0XD5GNI5K3</td>
    </tr>
    <tr>
      <td class="module-table-cell">9</td>
      <td class="module-table-cell">M9M5TWUVBY12XR</td>
    </tr>
    <tr>
      <td class="module-table-cell">13</td>
      <td class="module-table-cell">TDWDOOFVD7CD7K</td>
    </tr>
    <tr>
      <td class="module-table-cell">15</td>
      <td class="module-table-cell">MUY6FNX60KK68C</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="module-table-rack-info" rowspan="8">
        Row: 1</td>
    </tr>
    <tr>
      <td class="module-table-cell">1</td>
      <td class="module-table-cell">Y4BO94QZ17Y3I8</td>
    </tr>
    <tr>
      <td class="module-table-cell">3</td>
      <td class="module-table-cell">RXAL1YSRA0FNWT</td>
    </tr>
    <tr>
      <td class="module-table-cell">5</td>
      <td class="module-table-cell">OFV2FZJE6OCTR0</td>
    </tr>
    <tr>
      <td class="module-table-cell">7</td>
      <td class="module-table-cell">VMNO0XD5GNI5K3</td>
    </tr>
    <tr>
      <td class="module-table-cell">9</td>
      <td class="module-table-cell">M9M5TWUVBY12XR</td>
    </tr>
    <tr>
      <td class="module-table-cell">13</td>
      <td class="module-table-cell">TDWDOOFVD7CD7K</td>
    </tr>
    <tr>
      <td class="module-table-cell">15</td>
      <td class="module-table-cell">MUY6FNX60KK68C</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="module-table-rack-info" rowspan="8">
        Row: 3
      </td>
    </tr>
    <td class="module-table-cell">1</td>
    <td class="module-table-cell">Y4BO94QZ17Y3I8</td>
    <tr>
      <td class="module-table-cell">3</td>
      <td class="module-table-cell">RXAL1YSRA0FNWT</td>
    </tr>
    <tr>
      <td class="module-table-cell">5</td>
      <td class="module-table-cell">OFV2FZJE6OCTR0</td>
    </tr>
    <tr>
      <td class="module-table-cell">7</td>
      <td class="module-table-cell">VMNO0XD5GNI5K3</td>
    </tr>
    <tr>
      <td class="module-table-cell">9</td>
      <td class="module-table-cell">M9M5TWUVBY12XR</td>
    </tr>
    <tr>
      <td class="module-table-cell">13</td>
      <td class="module-table-cell">TDWDOOFVD7CD7K</td>
    </tr>
    <tr>
      <td class="module-table-cell">15</td>
      <td class="module-table-cell">MUY6FNX60KK68C</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Quentin
Quentin

Reputation: 943556

A <tr> can have as its children only <th> and <td> elements.

If you want to put another table there it needs to be inside one of those.

(You probably shouldn't be involving another table anyway, and expressing the relationship between data using rowspan and colspan, but I've no idea what the relationship between your bits of data is supposed to be).

Upvotes: 1

Related Questions