Hi all,
I have a asp.net gridview in a page.
I am trying to create a table using divs inside the tds of the gridview. The div in the td contains 4 inner divs. Each div contains some text.
But, the text in each div takes a different direction. It appears to be slanting and zig-zag.
I changes the display property, changed the font sizes. But nothing works. I want all the text to appear in a neat line.
Plz help me!
Hi dhanlak1 and welcome to the forums.
To help you, we really need to see the code you’re using. Do you have a link to a live page? If not, please post both the HTML and the CSS for the page. (Click the “Go advanced” button to reply, then use the # button to wrap
tags round your code.)OK. If I’ve understood what you’re asking, then one of your problems is an inconsistent use of spaces. You have a space after Sub Category1 and Sub Category2, but not after Sub Category3 and Sub Category4. That accounts for your “category” text misaligning.
However, your code is pretty messy. If you are displaying tabular data like this, use a table properly and put each item in a cell of its own, which will solve most of your alignment problems. Mixing in all those unnecessary divs and spans, along with in-line styles, is making it very hard to see what’s going on and will be a nightmare to maintain. Also, setting font-size to 6px is far too small for practical purposes; most, if not all, users will have to increase the font-size to read it, and that may then break your layout.
My advice would be to clean up and simplify your HTML before going any further. If you need help with that, then let us know.
(As I said before, if you’re posting code, remember to wrap
tags round it to keep it manageable.)Hello,
Here is a part of the html that i use. The text inside the divs is appearing slanting. The sub-category, account date are slanting.
Actually this table displays hierarchial data. The top level is Account number. Next is date, Next is sub category
<table id="tblPivotTables">
<tbody><tr>
<td valign="top" style="padding:35px;" id="td1"> </td>
<td valign="top" style="padding:35px;" id="td2"></td>
<td valign="top" style="padding:35px;" id="td3"></td>
<td valign="top" style="padding:35px;" id="td4"></td>
<td valign="top" style="padding:35px;" id="td5">
<div id="divPivotTable" style="width:100%;">
<div id="MainContent_AccountItemsUserControl1_pnlHeader">
<div style="width:100%;">
<center><span style="font-size:Larger;" class="tblItemHeaderClass" id="MainContent_AccountItemsUserControl1_Label1">Heading1</span></center>
</div>
<br><br>
<table width="450px" cellspacing="0" cellpadding="0" style="" id="tblPivotHeader3">
<tbody>
<tr>
<td align="left"><b>header1</b></td>
<td colspan="3">(All)</td>
</tr>
<tr>
<td align="left"><b>header1</b></td>
<td colspan="3">Date</td>
</tr>
<tr>
<td align="left"><b>Category</b></td>
<td colspan="3">PartNumber</td>
</tr>
<tr style="height: 55px;">
<td align="left" style="width: 187px;"><b>Row Labels</b></td>
<td style="width: 42px; text-align:center;"><b>Qty</b></td>
<td style="text-align:center; width: 60px;"><b>Price</b></td>
<td style="text-align:center; width: 85px;"><b>SubTotal</b></td>
</tr>
</tbody>
</table>
</div>
<div id="MainContent_AccountItemsUserControl1_up1">
<div>
<table cellspacing="0" cellpadding="0" border="1" style="background-color: White; border-color: Black; border-style: solid; width: 450px; border-collapse: collapse; font-size: 12px;" id="MainContent_AccountItemsUserControl1_grdAccount" rules="all" class="AccountItems">
<tbody><tr>
<td>
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandDatesOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:40%;padding-left:3%;"><span style="color:Black;font-weight:bold;text-decoration:underline;" id="MainContent_AccountItemsUserControl1_grdAccount_lblAccountNumber_0">Account: abb</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10070.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:14%;">10</div>
</div>
<div class="expandDatesInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" border="1" style="font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0" rules="all">
<tbody><tr>
<td style="background-color:White;">
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandItemsOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:35%;padding-left:5%;"><span style="color:Teal;font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_lblDate_0">12/20/2011</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10070.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:17%;">10</div>
</div>
<div class="expandItemsInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_grdItems_0">
<tbody><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category1 <font color="#009900" style="font-size: 6px">Category1</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">1</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1005.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$1005.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category2 <font color="#009900" style="font-size: 6px">Category1</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">2</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1006.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$2012.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category3<font color="#009900" style="font-size: 6px">Category1</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">3</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1007.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$3021.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category4<font color="#009900" style="font-size: 6px">Category1</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">4</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1008.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$4032.00</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr style="background-color:#6DA5F2;">
<td>
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;">
<div class="innerDiv" style="float:left;width:47%;"><span><b>Total for <span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_lblFooterAccount">abb</span>: </b></span></div>
<div class="innerDiv" style="float:left;width:10%;text-align:right;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_lblFooterQty">10</span></div>
<div class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_lblFooterPrice">4026.00</span></div>
<div class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_0_lblFooterCost">$10,070.00</span></div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr>
<td>
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandDatesOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:40%;padding-left:3%;"><span style="color:Black;font-weight:bold;text-decoration:underline;" id="MainContent_AccountItemsUserControl1_grdAccount_lblAccountNumber_1">Account: accc</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10110.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:14%;">10</div>
</div>
<div class="expandDatesInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" border="1" style="font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1" rules="all">
<tbody><tr>
<td style="background-color:White;">
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandItemsOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:35%;padding-left:5%;"><span style="color:Teal;font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_lblDate_0">12/20/2011</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10110.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:17%;">10</div>
</div>
<div class="expandItemsInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_grdItems_0">
<tbody><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category5<font color="#009900" style="font-size: 6px">Category2</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">1</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1009.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$1009.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category6<font color="#009900" style="font-size: 6px">Category2</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">2</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1010.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$2020.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category7<font color="#009900" style="font-size: 6px">Category2</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">3</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1011.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$3033.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category8<font color="#009900" style="font-size: 6px">Category2</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">4</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1012.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$4048.00</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr style="background-color:#6DA5F2;">
<td>
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;">
<div class="innerDiv" style="float:left;width:47%;"><span><b>Total for <span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_lblFooterAccount">accc</span>: </b></span></div>
<div class="innerDiv" style="float:left;width:10%;text-align:right;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_lblFooterQty">10</span></div>
<div class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_lblFooterPrice">8068.00</span></div>
<div class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_1_lblFooterCost">$10,110.00</span></div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr>
<td>
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandDatesOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:40%;padding-left:3%;"><span style="color:Black;font-weight:bold;text-decoration:underline;" id="MainContent_AccountItemsUserControl1_grdAccount_lblAccountNumber_2">Account: add</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10150.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:14%;">10</div>
</div>
<div class="expandDatesInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" border="1" style="font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2" rules="all">
<tbody><tr>
<td style="background-color:White;">
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandItemsOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:35%;padding-left:5%;"><span style="color:Teal;font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_lblDate_0">12/20/2011</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10150.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:17%;">10</div>
</div>
<div class="expandItemsInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_grdItems_0">
<tbody><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory9<font color="#009900" style="font-size: 6px">Category3</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">1</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1013.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$1013.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory10 <font color="#009900" style="font-size: 6px">Category3</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">2</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1014.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$2028.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory11 <font color="#009900" style="font-size: 6px">Category3</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">3</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1015.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$3045.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory12 <font color="#009900" style="font-size: 6px">Category3</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">4</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1016.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$4064.00</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr style="background-color:#6DA5F2;">
<td>
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;">
<div class="innerDiv" style="float:left;width:47%;"><span><b>Total for <span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_lblFooterAccount">add</span>: </b></span></div>
<div class="innerDiv" style="float:left;width:10%;text-align:right;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_lblFooterQty">10</span></div>
<div class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_lblFooterPrice">12126.00</span></div>
<div class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_2_lblFooterCost">$10,150.00</span></div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandDatesOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:40%;padding-left:3%;"><span style="color:Black;font-weight:bold;text-decoration:underline;" id="MainContent_AccountItemsUserControl1_grdAccount_lblAccountNumber_5">Account: ahh</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10270.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:14%;">10</div>
</div>
<div class="expandDatesInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" border="1" style="font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5" rules="all">
<tbody><tr>
<td style="background-color:White;">
<div style="width:100%;padding:7,7,7,7;font-size:8t;font-family:Verdana;float:left;">
<div class="expandItemsOuter" style="font:11px verdana;color:Maroon;float:left;width:100%;">
<div style="float:left;text-align:left;width:35%;padding-left:5%;"><span style="color:Teal;font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_lblDate_0">12/20/2011</span></div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:43%;font-weight:bold;">$10270.00</div>
<div class="runningtotal hideelement" style="float:right;text-align:right;width:17%;">10</div>
</div>
<div class="expandItemsInner" style="clear:both;">
<div>
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_grdItems_0">
<tbody><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory13<font color="#009900" style="font-size: 6px">New Category 4 - sample w/HP</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">1</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1025.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$1025.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory14 <font color="#009900" style="font-size: 6px">New Category 4 - sample w/HP</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">2</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1026.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$2052.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory15 <font color="#009900" style="font-size: 6px">New Category 4 - sample w/HP</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">3</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1027.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$3081.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:9px;vertical-align:bottom;">SubCategory16<font color="#009900" style="font-size: 6px">New Category 4 - sample w/HP</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;">4</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;">1028.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;">$4112.00</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr><tr style="background-color:#6DA5F2;">
<td>
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;">
<div class="innerDiv" style="float:left;width:47%;"><span><b>Total for <span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_lblFooterAccount">ahh</span>: </b></span></div>
<div class="innerDiv" style="float:left;width:10%;text-align:right;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_lblFooterQty">10</span></div>
<div class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;"><span id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_lblFooterPrice">24396.00</span></div>
<div class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_5_lblFooterCost">$10,270.00</span></div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
</tr>
<tr style="background-color:#FF69D4;">
<td>
<div style="font-family:Verdana;font-size:14px;color:Black;float:left;text-align:left;width:100%;">
<div class="innerDiv" style="float:left;width:24%;text-align:right;"><span><b>Grand Total: </b></span></div>
<div class="innerDiv" style="float:left;width:34%;text-align:right;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_lblFooterQty">117100</span></div>
<div class="innerDiv" style="float:left;width:36%;text-align:right;color:#8B0A00;padding-left:21px;"><span style="font-weight:bold;" id="MainContent_AccountItemsUserControl1_grdAccount_lblFooterCost">$120,174,111.00</span></div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div></td>
<td valign="top" style="padding:35px;" id="td6">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody></table>
Here is the css code for the html page:
.tblItemHeaderClass
{
font-family:Verdana;
font-size:11px;
color:Black;
font-weight:bold;
}
.AccountItems .expandDatesOuter
{
background: url("../Images/tree_minus.gif") no-repeat;
background-position:3px 50%;
cursor:pointer;
}
.AccountItems .expandDatesOuterInactive
{
background: url("../Images/tree_plus.gif") no-repeat;
background-position:3px 50%;
cursor:pointer;
}
.runningtotal
{
/* used for jquery code */
}
.hideelement
{
/* used for jquery code */
}
.innerDiv
{
overflow:hidden;
padding-top:2px;
padding-bottom:2px;
/* -------------- */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Thanks
I tried using tables, but that also does not work. This is the code that i tried:
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:450px;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_8_grdItems_0">
<tbody><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1001.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1001000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1002.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1002000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1003.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2006000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1004.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2008000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1017.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2034000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1018.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3054000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1019.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3057000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category item1</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1020.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2040000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 123<font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1043.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4172000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 456 <font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1044.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4176000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 523<font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1045.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4180000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1013.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1013000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">5000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1014.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$5070000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category item2 (w/HI)</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1015.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3045000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category item3</font></td>
<td style="float:left;width:12%;text-align:right;">5000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1016.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$5080000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category item3</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1029.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4116000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category item3</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1030.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3090000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category item3</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1031.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3093000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category item3</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1032.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3096000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1005.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1005000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1006.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1006000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1007.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1007000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1008.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1008000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">3000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1021.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$3063000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1022.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2044000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1023.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2046000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1024.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4096000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1009.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1009000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1010.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1010000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1011.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1011000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1012.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2024000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 1<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1025.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4100000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 2<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1026.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4104000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 3<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">5000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1027.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$5135000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 4<font color="#009900" style="font-size: 7px">New Category list item4</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1028.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4112000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 5<font color="#009900" style="font-size: 7px">New Category list item5</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1039.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2078000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 6<font color="#009900" style="font-size: 7px">New Category list item5</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1040.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4160000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 7(w/o HI) <font color="#009900" style="font-size: 7px">New Category list item5</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1041.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4164000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 8(w/ HI) <font color="#009900" style="font-size: 7px">New Category list item5</font></td>
<td style="float:left;width:12%;text-align:right;">4000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1042.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$4168000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 9<font color="#009900" style="font-size: 7px">Time and Equipment</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1033.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2066000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 10<font color="#009900" style="font-size: 7px">Time and Equipment</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1034.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2068000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 11<font color="#009900" style="font-size: 7px">Time and Equipment</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1035.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2070000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 12<font color="#009900" style="font-size: 7px">Time and Equipment OT</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1036.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2072000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 13<font color="#009900" style="font-size: 7px">Time and Equipment OT</font></td>
<td style="float:left;width:12%;text-align:right;">1000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1037.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$1037000.00</td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="background-color:White;">
<table cellspacing="0" cellpadding="0" width="100%" style="font-size:12px;">
<tbody><tr>
<td style="float:left;width:30%;padding-left:10%;font-size:9px;vertical-align:bottom;">Sub Category item 14<font color="#009900" style="font-size: 7px">Time and Equipment OT</font></td>
<td style="float:left;width:12%;text-align:right;">2000</td>
<td style="float:left;width:18%;text-align:right;color:#8B0A00;">1038.00</td>
<td style="float:left;width:20%;text-align:right;color:#8B0A00;">$2076000.00</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
The text Equipment and Equipment OT are too slanting. Can you please correct this?
You have set every row as a separate table, all nested inside another table. This really isn’t the way to handle the data. Create one simple table, with all the information laid out in individual cells, and it will be aligned by default. For example:
<table id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_8_grdItems_0">
<thead>
<tr><th scope="col">1st column heading</th><th scope="col">2nd column heading</th><th scope="col">3rd column heading</th><th scope="col">4th column heading</th><th scope="col">5th column heading</th></tr>
</thead>
<tbody>
<tr>
<td>Sub Category item 1</td>
<td class="col2">New Category item1</td>
<td class="col3">1000</td>
<td>1001.00</td>
<td>$1001000.00</td>
</tr>
<tr>
<td>Sub Category item 2</td>
<td class="col2">New Category item1</td>
<td class="col3">1000</td>
<td>1002.00</td>
<td>$1002000.00</td>
</tr>
<tr>
<td>Sub Category item 3</td>
<td class="col2">New Category item1</td>
<td class="col3">2000</td>
<td>1003.00</td>
<td>$2006000.00</td>
</tr>
<tr>
<td>Sub Category item 4</td>
<td class="col2">New Category item1</td>
<td class="col3">2000</td>
<td>1004.00</td>
<td>$2008000.00</td>
</tr>
</tbody>
</table>
with this CSS
table {width: 450px;
border: 0;
font-size: 12px;
}
th {padding: 0.5em;}
td {background-color: white;
color: #8B0A00;
text-align: right;
padding: 0.2em;
}
td:first-child {text-align: left;
color: #000;
font-size: 9px;
width: 25%;
}
.col2 {text-align: left;
color: #009900;
font-size: 7px;
width: 25%;
}
.col3 {color: #000;
width: 12%;
}
will give you the layout you’re looking for.
As I said before, your font sizes are too small to be practical for most purposes, so I would advise you to change them.
Hi,
Can you plz tell me what is wrong with the following code. I have used only 2 tables. But the text is not straight in any td’s.
<head>
<style>
.gridclass
{
border: 1px solid #5F9EA0;
font-family:Verdana,helvetica,sans-serif;
font-size:12px;
}
.gridclass tr td
{
/* background: Silver; */
/* border:1px solid black; */
border-spacing:0px;
font-size:12px;
}
</style>
</head>
<body>
<table width="450px" style="border:1px solid black;" class="gridclass">
<tr id="trItems2" class="expandItemsInner">
<td id="tdItems2" class="" colspan="100%">
<div>
<table cellspacing="0" cellpadding="0" style="border-width:0px;font-size:12px;width:100%;border-collapse:collapse;" id="MainContent_AccountItemsUserControl1_grdAccount_grdDate_8_grdItems_0" class="gridclass1">
<tbody>
<tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">2000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1033.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$2066000.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">2000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1034.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$2068000.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">2000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1035.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$2070000.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment OT</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">2000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1036.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$2072000.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment OT</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">1000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1037.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$1037000.00</span>
</div>
</td>
</tr><tr>
<td style="background-color:White;">
<div style="font:11px verdana;color:Black;float:left;text-align:left;width:100%;display:block;" id="divItems1">
<span class="innerDiv" style="float:left;width:40%;padding-left:10%;font-size:11px;vertical-align:bottom;" id="sp1">Field Coordinator And Vehicle <font color="#009900" style="font-size:7px;">Time and Equipment OT</font></span>
<span class="innerDiv" style="float:left;width:7%;text-align:right;" id="sp2">2000</span>
<span class="innerDiv" style="float:left;width:18%;text-align:right;color:#8B0A00;" id="sp3">1038.00</span>
<span class="innerDiv" style="float:left;width:25%;text-align:right;color:#8B0A00;" id="sp4">$2076000.00</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</table>
</body>
This is a 3-level nested grid. So, it will need at-least 3 tables nested within. Any help would be great
Thanks
This is the doctype that i use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Well, again you have put everything into one table cell <td> and then tried to use divs and spans to achieve your layout. As I explained before, if you lay out your data in a correctly marked-up table, then you will not have these problems.
I don’t understand what you mean by that. The code that you posted above has one table nested inside another, but there is no data at all in the outer table. Why does it need to be there? In any case, even with nested tables each one needs to be correctly structured.
The first step is to build a proper table using <th>, <tr> and <td> to set out your data. If you still have alignment problems after that, then post back and we can help you.