Johni Devo Johni Devo - 7 months ago 12
HTML Question

CSS div tag inherit dimensions from table rows

I am not such an expert in CSS;

My question is: can a

div
tag inherit dimensions from a
table
rows based on table row's
class
or
id
?

For example: We have a table with a couple of rows, but we don't know exact size of one table row, but we know the id/class of the rows. And by absolute positioning a div tag on table based on id/class to fill up 2 rows from start to end!

Can anyone point me to some addresses or to give me a tip code?

<table>
<col width="9%">
<thead>
<tr>
<th colspan="2">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">&nbsp;</th>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<th rowspan="2">&nbsp;</th>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>


I search for something like this:

div and the table

Answer

You can take the width and height of parent td and then set them to the div using javascript.You want something like this?

https://jsfiddle.net/toLacq32/1/

$(document).ready(function(){
tdWidth = $('#inner-div').closest('td').width();
tdHeight = $('#inner-div').closest('td').height();
$("#inner-div").width( tdWidth ).height(tdHeight);
});