0

I have a table in my HTML that uses display: table. In the row I have two cells with some top/bottom padding and inside those I have <div>s which can be a different height:

<div style="display: table-row;">
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: red;">
          <input ng-model="row.abc">
       </div>
    </div>
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: blue;">
          <input ng-model="row.def">
          <input ng-model="row.ghi">
       </div>
    </div>
</div>

Is there some way that I can make the height of the red and the blue be equal? As it is now the red is just half the height of the blue. Note that I am not looking for something that would make the two inputs go inline. I'm looking for a way to make the red area expand in height to match whatever height the blue is and vice versa.

I would like this to work using modern browsers. Thanks

2 Answers2

0

Why don't you drop the div inside the cell? Because this would work.

<div class="table">
    <div class="table-row">
        <div class="table-cell" style="background-color: red;">
           <input type="text" value="test" />
        </div>
        <div class="table-cell" style="background-color: blue;">
              <input type="text" value="test" />
              <input type="text" value="test" />
        </div>
    </div>
</div>

http://jsfiddle.net/e6vx7j8d/

Jonny Vince
  • 487
  • 2
  • 9
-2

Is there a compelling reason to be using nested <div> elements rather than normal table elements?

In any case, you should be able to set height: 100% as a style for each table cell, to force each one to fill its container's vertical dimension.

zerobandwidth
  • 1,213
  • 11
  • 18
  • It's the height of the
    inside the table-cell that I need to set to 100%. That unfortunately does not work.
     –  Aug 30 '15 at 13:56