I have a table, where the first cell in the second row has a content created by a JavaScript component, which means I a-priori do not know its height and width - but in the below snippet, I simulate its final size with <div id="content_main" style="width:125px; height:350px; background-color: red;"></div>. Either way, this component sets the height of the second row.
In the second cell in the second row, I'd like to place a table, such that the placed table's content width sets the width of the second cell - however, the placed table height should "stretch" to fill the available height of the second row (which as mentioned, is ultimately set by div id="content_main").
I've seen posts like How to stretch the table to fill all available space , or In CSS, how can I make a table expand to fill a container div? which notes:
Just set the width and height of your table to 100%. But the parent div of the table must have an assigned height if the cells are empty they will not take up any vertical space without a height specified.
... or Make a DIV fill an entire table cell where the recommendation is:
I had to set a fake height to the
<tr>and height: inherit for<td>str has
height: 1px(it's ignored anyway)Then set the td
height: inheritThen set the div to
height: 100%
I believe that is what I did in the snippet below, however, the placed table still does not "stretch" to fill available height:
.txtsz12 { font-size: 1.2em; text-align: center;}
.tblborder, .tblborder tr, .tblborder tr td {
border-collapse: collapse;
border: 1px solid #000;
}
#tblmain_row_content td {
padding-left: 78px;
padding-right: 78px;
padding-top: 20px;
padding-bottom: 20px;
}
td#stg_tbl_td, td#stg_tbl_td td { /* needs to be more specific to apply (to reset above padding) */
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}<table id="tblmain" class="tblborder">
<tbody id="tblmain_body">
<tr id="tblmain_row_labels">
<td>
<div class="txtsz12"><b>Content</b></div>
</td>
<td><div class="txtsz12">Settings</div>
</td>
</tr>
<tr id="tblmain_row_content" style="height: 1px;">
<td><div id="content_main" style="width:125px; height:350px; background-color: red;"></div></td>
<td id="stg_tbl_td" style="height: inherit;">
<table id="tblsettings" class="tblborder" style="height: 100%;">
<tbody>
<tr>
<td>Test Mode 1</td>
<td>settings: lorem 125 ipsum 256 dolor 456</td>
</tr>
<tr>
<td>Test Mode 2</td>
<td>settings: lorem 225 ipsum 356 dolor 556</td>
</tr>
<tr>
<td>Test Mode 3</td>
<td>settings: lorem 325 ipsum 456 dolor 656</td>
</tr>
<tr>
<td>Test Mode 4</td>
<td>settings: lorem 425 ipsum 556 dolor 756</td>
</tr>
<tr>
<td>Test Mode 5</td>
<td>settings: lorem 525 ipsum 656 dolor 856</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>For this particular example, I know a-priori that my content div has height:350px; and top/bottom padding is 20px; so the overall tr (or td) height is 350+2*20 = 390 px - and I can simulate the layout that I want by setting the height of the placed table to 390 px:
.txtsz12 { font-size: 1.2em; text-align: center;}
.tblborder, .tblborder tr, .tblborder tr td {
border-collapse: collapse;
border: 1px solid #000;
}
#tblmain_row_content td {
padding-left: 78px;
padding-right: 78px;
padding-top: 20px;
padding-bottom: 20px;
}
td#stg_tbl_td, td#stg_tbl_td td { /* needs to be more specific to apply (to reset above padding) */
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}<table id="tblmain" class="tblborder">
<tbody id="tblmain_body">
<tr id="tblmain_row_labels">
<td>
<div class="txtsz12"><b>Content</b></div>
</td>
<td><div class="txtsz12">Settings</div>
</td>
</tr>
<tr id="tblmain_row_content" style="height: 1px;">
<td><div id="content_main" style="width:125px; height:350px; background-color: red;"></div></td>
<td id="stg_tbl_td" style="height: inherit;">
<table id="tblsettings" class="tblborder" style="height: 390px;">
<tbody>
<tr>
<td>Test Mode 1</td>
<td>settings: lorem 125 ipsum 256 dolor 456</td>
</tr>
<tr>
<td>Test Mode 2</td>
<td>settings: lorem 225 ipsum 356 dolor 556</td>
</tr>
<tr>
<td>Test Mode 3</td>
<td>settings: lorem 325 ipsum 456 dolor 656</td>
</tr>
<tr>
<td>Test Mode 4</td>
<td>settings: lorem 425 ipsum 556 dolor 756</td>
</tr>
<tr>
<td>Test Mode 5</td>
<td>settings: lorem 525 ipsum 656 dolor 856</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>... however, as I noted, in my actual case I do not know the height of the div id="content_main" element a-priori, so I would need a solution where the placed table "fills" out the "available" height of the cell (either by somehow specifying the height of the placed table as 100%, or by other means).
Is it possible to solve this with CSS only, without resorting to JavaScript (to read the computed cell/row height, and then apply it to the placed table height, similar to an answer in How to make <div> fill <td> height ) ?
