Solved

CSS Table position problem

Posted on 2011-02-22
3
300 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
Comment Utility
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
Comment Utility
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
Comment Utility
Perfect!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

7 Experts available now in Live!

Get 1:1 Help Now