Greetings! I recently inherited a JavaScript application that includes a search window with the following code snippet.
My goal is to have the text "Statistics Search" positioned above the Statistics label and checkbox. Next, I would like the remaining rows to stack on top of each other with "Estimates Search" at the beginning. Is it feasible to achieve this layout using the existing table structure pTable? I prefer not to delete the table due to its connections to various files.
I attempted to introduce a new div with a width of 50%, but unfortunately, it did not yield the desired outcome. Any insights or guidance provided would be greatly appreciated.
CSS
.pPane {
float: right;
clear: right;
margin-left: 5px;
}
.ptable
{
float:left;
margin-top:10px;
}
.pBottom
{
float: left;
clear: both;
width: 100%;
}
HTML
<div id="pPane" class="pPane">
<div id="pBottom" class="pBottom">
<table id="pTable" class="ptable">
<tr><td colspan="9"><span id="sSearch" style="color:black; font-size:12px; text-decoration:underline;">Statistics Search
</span></td></tr>
<tr><td colspan="9"><label>Statistics</label></td><td><input id="1" type="checkbox" /></td></tr>
<tr><td colspan="9"><span id="eSearch" style="color:black; font-size:12px; text-decoration:underline;">Estimates Search</span></td></tr>
<tr><td colspan="9"><label>Estimate 1</label></td><td><input id="2" type="checkbox" /></td></tr>
<tr><td colspan="9"><label>Estimate 2</label></td><td><input id="3" type="checkbox" /></td></tr>
<tr><td colspan="9"><label>Estimate 3</label></td><td><input id="4" type="checkbox" /></td></tr>
</table>
</div>
</div>