CODEWITHSUNDEEP
htmlcss
Long Tran
Long Tran

Reputation: 9

How to set height of inner table

In my second column, I need to display some row dynamically. So I think the option to use rowspan can't be the best choice here. I think I may need to have an inner table inside the second column. But the problem is the inner height of the inner table.

If the second column is shorter than the first column, it cause the the whole table structure fall down parts. How can I set the height of of inner table so that it can fix outer table height?

JSFIDDLE

html 

<table class="outter">
<tr>
    <td>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
    </td>
    <td>
        <table class="inner">
            <tr>
                <th>header</th>
            </tr>
            <tr>
                <td>a</td>
            </tr>
        </table>
    </td>
</tr>
</table>

css:

.outter, .inner {
  border-collapse: collapse;
}
.outter {
    width: 100%;
    background: red;
}

.inner {
    width: 100%;
    height: 100%;
    background: green;
}

Upvotes: 0

Views: 360

Answers (2)

Doug E
Doug E

Reputation: 16

Set the height of the outer table to 100% and then wrap the outer table in a div so that it doesn't actually span the whole height of the containing element.

<div>
<table class="outter">
<tr>
    <td>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
    </td>
    <td>
        <table class="inner">
            <tr>
                <th>header</th>
            </tr>
            <tr>
                <td>a</td>
            </tr>
        </table>
    </td>
</tr>
</table>
<div>

Upvotes: 0

j08691
j08691

Reputation: 207943

If you want the height of the inner table to use the full height of the outer table you have to set a height on the outer table:

.outter {
    width: 100%;
    background: red;
    height:100%;
}


.outter,
.inner {
  border-collapse: collapse;
}
.outter {
  width: 100%;
  background: red;
  height: 100%;
}
.inner {
  width: 100%;
  height: 100%;
  background: green;
}
<table class="outter">
  <tr>
    <td>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
    </td>
    <td>
      <table class="inner">
        <tr>
          <th>header</th>
        </tr>
        <tr>
          <td>a</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions