Streatch <table> to fill height of <td> in which it is contained - Html

JamieJenson
March 3, 2023
228 views
0 votes
2 Answers

I have an arbitrary number of tables whose heights I do not know in advance.

An outer table, and several inner tables contained like so within the outer table
<tr><td><table></table></td></tr>

The problem is that if one of the tables is larger than the others the remaining tables will not stretch to fill any gap above and below created by the larger table.

<!DOCTYPE html>
<html lang="en">
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
  }
  
  th,
  td {
    width: 14ch;
    height: 1ch;
  }
</style>

<head>
  <meta charset="UTF-8">
  <title>Wont Stretch</title>
</head>

<body>
  <table id="outer">
    <tr>
      <th style="width: 1ch"></th>
      <th style="width: 14ch">1</th>
      <th style="width: 1ch"></th>
      <tr>
        <td style="width: 1ch">
          <table>
            <tr>
              <td>T1</td>
            </tr>
            <tr>
              <td>T1</td>
            </tr>
          </table>
        </td>
        <td>
          <table id="col1">
            <tr>
              <td>test2</td>
            </tr>
            <tr>
              <td>test2</td>
            </tr>
            <tr>
              <td>test2</td>
            </tr>
            <tr>
              <td>test2</td>
            </tr>
          </table>
        </td>
        <td style="width: 1ch">
          <table>
            <tr>
              <td>T3</td>
            </tr>
            <tr>
              <td>T3</td>
            </tr>
          </table>
        </td>
      </tr>
    </tr>
  </table>
</body>

I have tried rowspan and table-layout: fixed, both of which did nothing, but the only solution that came close was setting the height ahead of time which I cannot do as I don’t know in advance what the largest table will be. Even then there was a gap I could not fill, it was merely close enough for nukes and hand grenades.

Answers

Is there a reason why you want to use nested tables? If I understand the question correctly you can achieve this by using 1 table and for example rowspan/colspan.

table, th, td {
    border:1px solid black ;
    border-collapse: collapse ;
    padding: 0;
    margin: 0;
  }
  th, td {
    width: 14ch ;
    height: 1ch ;
  }

<table>
  <tr>
    <th></th>
    <th>Header</th>
    <th></th>
  </tr>
  <tr>
    <td rowspan="2">Rowspan 1 left</td>
    <td>1</td>
    <td rowspan="2">Rowspan  1 right</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td rowspan="2">Rowspan 2 left</td>
    <td>3</td>
    <td rowspan="2">Rowspan 2 right</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
<table>

As mentioned in an answer that the better solution is to use rowspan and colspan. But if you have to use the nested tables, one of the solution is to write class names to the tables and in CSS, make their height 100%.

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

th,
td {
  width: 14ch;
  height: 1ch;
}

.table-left {
  height: 100%;
}

.table-center {
  height: 100%;
}

.table-right {
  height: 100%;
}

<table id="outer">
  <tr>
    <th style="width: 1ch"></th>
    <th style="width: 14ch">1</th>
    <th style="width: 1ch"></th>
  </tr>
  <tr>
    <td style="width: 1ch">
      <table class="table-left">
        <tr>
          <td>T1</td>
        </tr>
        <tr>
          <td>T2</td>
        </tr>
      </table>
    </td>
    <td>
      <table id="col1" class="table-center">
        <tr>
          <td>test2</td>
        </tr>
        <tr>
          <td>test2</td>
        </tr>
        <tr>
          <td>test2</td>
        </tr>
        <tr>
          <td>test2</td>
        </tr>
      </table>
    </td>
    <td style="width: 1ch">
      <table class="table-right">
        <tr>
          <td>T3</td>
        </tr>
        <tr>
          <td>
            T4<br> break
            <br> break
            <br> break
            <br> break
            <br> break
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Streatch <table> to fill height of <td> in which it is contained – Html

Answers