I'm having trouble getting some formatting to work properly. I am using a row of cells (not visible) to set the formatting for a table by listing a width for each one. (I am doing this because I have a strange setup with <div>
s and <table>
s mixed together to form a scrolling panel). The widths are working fine in one place, but not being respected in another. An example of the code is shown below:
<div id='am_verticalScrollerDiv' style='height: 500px; overflow-y: auto;'>
<table id='am_verticalScrollerLayoutTable' height='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td id='am_resourceListCell'>
<div id='am_resourceListDiv'>
<table id='am_resourceTitleTable' width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr id='am_resource_tableTitleBar'></tr>
</table>
</div>
<table id='am_resourceList' width='100%' border='0' cellpadding='0' cellspacing='0'>
<tbody></tbody>
</table>
</td>
<td id='am_horizScrollCell'>
<div id='am_horizScrollDiv' style='width:900px; overflow-x: auto;'>
<div id='am_schedDataTitleBarDiv'>
<table id='am_schedDataTitleBarTable>
<tr class='am_schedule_formatBar'></tr>
<tr id='am_schedule_tableTitleBar'></tr>
</table>
</div>
<table id='am_scheduleDisplay' width='100%' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed; empty-cells: show;'>
<tbody></tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
I have tried replacing the formatting rows with <colgroup>
s, but no luck. It seems that the <div>
am_schedDataTitleBarDiv
is taking the width of am_horizScrollDiv
. I have tried setting an explicit width for the former, but it still doesn't work properly. Any suggestions?
EDIT: I forgot to mention, all of the data is being built using the jQuery .html()
and .append()
methods, but the only relevant part is that .am_schedule_tableTitleBar
is being populated with a list of empty cells with the width set to 20px, and am_schedule_tableTitleBar
is being filled with several cells with colspan='7'
.