Solved

CSS Table position problem

Posted on 2011-02-22
3
301 Views
Last Modified: 2012-05-11
I have this table contained in a few other "parent" div's and this setup is giving me a headache in the "Print Preview": the header (as in Master Template) slides down towards the middle of the page.

I tried every possible combination with the "Position" property but nothing worked to my satisfaction. How could this table be recreated in CSS only?

PS: I know the CSS problem is related to this table because when I take this table out of the file completely, the Print Preview looks fine.
<table width="670" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                   <th scope="col" class="header first">Reg.No.</th>
                                   <th scope="col" class="header">Logo</th> 
                                   <th scope="col" class="header">Trademark</th>
                                   <th scope="col" class="header">Filing Date</th>
                                   <th scope="col" class="header last">Status</th>
                              </tr>
                              <% 
                                  int i = 0;
                                  foreach (var r in Model.results)
                                  {
                                    i += 1;
                                  %>
                                    <% if (i % 2 == 0)
                                       {
                                           Response.Write("<tr bgcolor=EEEEEE>");
                                       }
                                       else
                                       {
                                           Response.Write("<tr bgcolor=FFFFFF>");
                                       }
                                            %>
                                        <td>
                                            <% if (r.registration_number != 0)
                                               { Response.Write(r.registration_number); } %>
                                        </td>
                                        <td>
                                            <img src="/getImage.asp?<%= r.serial_number %>" width="75" />
                                        </td>                                        
                                        <td>
                                            <%= r.mark_identification%>
                                        </td>
                                        <td>
                                            <%= r.filing_date %>
                                        </td>
                                        <td align="center" valign="top">
                                            <%= r.CodeDescription%>
                                            <% if (r.ShowApplyNow == true)
                                               { %>
                                                <br />
                                                
                                                
                                            <% } %>    
                                        </td>      
                                    </tr>
                                  <% 
                                    }

                                    if (i == 0 || Model.results == null)
                                    {
                                  %>
                                    <tr><td>&nbsp;</td></tr>
                                    <tr>
                                        <td colspan="4" style="padding: 0 0 0 0" align="right" valign="middle"> 
                                            <b>"<% Response.Write(PersistantStateHelper.TMSearchTerm); %>" 
                                            may be available</b> &nbsp; &nbsp;
                                        </td>
                                        <td style="padding: 0 0 0 0" align="center">
                                            
                                        </td>
                                    </tr>
                                                
                                  <% } %>
                              
                         </table>

Open in new window

0
Comment
Question by:conrad2010
3 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34958347
if you can share the only-html (using tables) working version of the code that you have shared, i can try to convert that into css-div thing.

0
 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 34961063
This is an example of a table written in html with css. You'll have to style it and replace constants with your code, but it may be useful to you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>

<style type="text/css">
.container	{ width:670px;
			  border:0;
			 color:#2f2044;
			  }
.Reg,
.Logo,
.Trademark,
.FileDate,
.Status		{width:127px;
			 height:100%;
			 overflow:hidden;
			 display:inline-block;
			 text-align:right;
			 }


div:nth-last-of-type(odd)
{
background:blanchedalmond;
}
div:nth-last-of-type(even)
{
background:skyblue;
}
div.header {font-weight:bold;
		 color:blanchedalmond;
		 background-color:steelblue;
		 padding-top:4px;
		 }
</style>
</head>

<body>
<div class="container">
<div class="header">
	<span class="Reg">Reg. No.</span>
	<span class="Logo">Logo</span>
	<span class="Trademark">Trademark</span>
	<span class="FileDate">File Date</span>
	<span class="Status">Status</span>
</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Active</span>
</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
	</div>

	<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Active</span>
</div>
<div>

	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
	</div>

	<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Pending</span>

</div>
<div>
	<span class="Reg">193,227,401</span>
	<span class="Logo">February 28, 1937</span>
	<span class="Trademark">February 28, 1937</span>
	<span class="FileDate"> January 14, 1937</span>
	<span class="Status"> Expired</span>
</div>
<div>
<small>Tested with IE9. Earlier versions of IE don't support nth-last-of-type.  Even and odd div classes may be defined if you must support old browsers.</small>
</div>

</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:conrad2010
ID: 34962426
Perfect!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now