根据表格变量宽度设置DIV的宽度

Question

I have two tables that are related between them but are in a different scoopes and I sometimes need to hide some columns and make these 2 tables the same column width. I already achieve that setting the min-width and max-width to the table but above the table I have a separated panel that must have the same width of the table.

So, my tables can have min-width:500px and max-width:700px according to the validations.

How can I set the same current size to the div of above.

I tried to define the window.onload like this.

<script type="text/javascript">
window.onload = ($('[id$=pnlActions]')[0]).clientWidth = document.getElementById('myTable').offsetWidth;

Or this

window.onload = ($('[id$=pnlActions]')[0]).style.clienWidth = document.getElementById('myTable').offsetWidth;

And this

window.onload = ($('[id$=pnlActions]')[0]).style.offsetWidth = document.getElementById('myTable').offsetWidth;
</script>

Nothing happens

<asp:Panel ID="pnlActions" runat="server" style="min-width:500px; max-width:700px;">
</asp:Panel>
<table id="myTable" cellpadding="0" cellspacing="0" style="min-width:500px; max-width:700px;">
</table>
<table id="myTable2" cellpadding="0" cellspacing="0" style="min-width:500px; max-width:700px;">
</table>

Even instead of a panel, I used a client div and didn't work at all.

<div id="divActions" style="min-width:500px; max-width:700px;">
</div>

window.onload = document.getElementById('divActions').clientWidth = document.getElementById('myTable').offsetWidth;

I tested this on Chrome 29, IE8 and IE10

Answer 1

To begin with I don think style is a valid ASP tag,

<asp:Panel ID="pnlActions" runat="server" style="min-width:500px; max-width:700px;">

Have you tried making a class and using CssClass instead? Just to be sure!

Edit:

I made a fiddle for you where it works fine http://jsfiddle.net/VYLsE/2/

$(function () {
    var width = $('#myTable').width();
    $('#divActions').width(width);
});

Remember you have to load jQuery on your page too!