CODEWITHSUNDEEP
jqueryhtmlcsshtml-table
Brandon
Brandon

Reputation: 375

Make table size within TD same as containing TD

For what i need to do, I need to have a table within another table's TD, and need the cells of that table to be the same height and width as the containing table.

A few notes:

The containing TD CANNOT have a fixed height or width, it is created dynamically depending on the size of the data coming into the original table, so this rules out the ability for me to use height and width: 100% on the inner table (which is only possible if the parent container has a fixed width or height).

Right now the height of the table is set to 100px, just so its easier to see in the picture below with the notes ive made on it, it cannot have a fixed height because the contents of cell1 and cell 2, need to be at the very top of the cells, which in turn need to be at the very top and bottom of the containing TD.

the HTML and CSS for the entire table is massive, so here is just from the containing TD on up to keep it clean: 

.bottomAlign {
  vertical-align: bottom;
}

.innerTable {
  height: 100px;
}

.topAlign {
  vertical-align: top;
}
<td>
  <table class="innerTable">
    <tr class="topAlign">
      <td>Cell 1</td>
    </tr>
    <tr class="bottomAlign">
      <td>Cell 2</td>
    </tr>
  </table>
</td>

Here is a picture for reference:enter image description here

Upvotes: 0

Views: 290

Answers (1)

JoeCrash
JoeCrash

Reputation: 532

Here is a fiddle emulating the dynamically sized td, along with snippet to resize inner table

http://jsfiddle.net/v6hg9vdt/

This is the only part of the fiddle that matters, the rest was just to resize the outer td

var inner = $('.innerTable');
var setInnerSize = function(){
    inner.width(inner.parent().width());
    inner.height(inner.parent().height());  
};

Upvotes: 1

Related Questions