CODEWITHSUNDEEP
htmlcsshtml-table
Bhuwan
Bhuwan

Reputation: 16855

nested table not taking 100% height of parent td

I have created a nested table by writing a table inside a td. I want that the table inside the td should take the 100% height of the parent td. I have tried height:100%, but not working.

Is there any way to make the inner table to take the 100% height or this is the table default behaviour?

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}
<table>
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 1759

Answers (3)

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10384

For some weird reason, setting height: 1px; to the outer table fixes the problem.

It looks like a bug in specification (since the problems is present in all the browsers, and the workaround works in all the major browsers as well).

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}

.outer-table {
  height: 1px;
}

.inner-table {
  height: 100%;
}
<table class="outer-table">
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table class="inner-table">
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Just do this:

table {
  width: 100%;
  border-collapse: collapse;
  height: 100%; 
}

td {
  border: 1px solid red;
  vertical-align: top;
  height: 100%;
}

table table{
 height: 100%;
}

DEMO HERE

Upvotes: 1

patelarpan
patelarpan

Reputation: 7991

add height:100% to table.

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}
<table>
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions