CODEWITHSUNDEEP
htmlangularjs
Anirudh Agarwal
Anirudh Agarwal

Reputation: 697

Need a table structure in html of table within table

Need Table like this.

Please refer the table structure needed in the pic above. Can any body guide how this can be achieved

Upvotes: 0

Views: 349

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Like this?

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: middle;
}
.tg td {
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg th {
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg .tg-7uzy {
  background: #cfc;
}
.tg .tg-yw4l {
  background: #ccf;
}
<table class="tg">
  <tr>
    <th class="tg-yw4l"></th>
    <th class="tg-yw4l">Col 1</th>
    <th class="tg-yw4l">Col 2</th>
    <th class="tg-yw4l">Col 3</th>
    <th class="tg-yw4l">Col 4</th>
  </tr>
  <tr>
    <td class="tg-7uzy" rowspan="3">Row 1</td>
    <td class="tg-7uzy" rowspan="3"></td>
    <td class="tg-7uzy" rowspan="3"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l" rowspan="3">Row 2</td>
    <td class="tg-yw4l" rowspan="3"></td>
    <td class="tg-yw4l" rowspan="3"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy">Row 3</td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l">Row 4</td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>

Upvotes: 1

Related Questions