CODEWITHSUNDEEP
htmlcss
Vishwa Mithra Tatta
Vishwa Mithra Tatta

Reputation: 135

HTML-CSS- Table rows not working as expected

This is my code:

.MainTable {
  width: 100%;
  height: 100%;
}

.SecondRow {
  background-color: blue;
  height: 100%;
  width: 100%;
}

.TopRow {
  background-color: green;
  height: 25px;
  width: 100%;
}
<table class="MainTable">
  <tr class="TopRow">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr class="SecondRow">
    <td class="Tags"></td>

    <td>
      <table class="ContentTable">
        <tr>
          <td></td>
        </tr>

        <tr>
          <td></td>
        </tr>
      </table>
    </td>

    <td class="Stats"></td>
  </tr>
</table>

As you can see the second row is not extending to its full extent. And why are the tds not equally spaced? I want the second row to occupy the full width and 100% height too. But as you can see, only some of it is showing. The second row is not occupying the full width and height. What am I doing wrong?

Upvotes: 0

Views: 704

Answers (1)

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

You can use the colspan="2" attribute on the <td>

.MainTable {
  width: 100%;
  height: 100%;
}

.SecondRow {
  background-color: blue;
  height: calc(100vh - 25px);
  width: 100%;
}

.TopRow {
  background-color: green;
  height: 25px;
  width: 100%;
}
<table class="MainTable">
  <tr class="TopRow">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr class="SecondRow">
    <td class="Tags" colspan="3"></td>

    <td colspan="1">
      <table class="ContentTable">
        <tr>
          <td></td>
        </tr>

        <tr>
          <td></td>
        </tr>
      </table>
    </td>

    <td class="Stats"></td>
  </tr>
</table>

Upvotes: 1

Related Questions