Jump to content

Css Not Working Well


yangkai9999
 Share

Recommended Posts

Hello,I got a sample CSS file like this:a img { border: 0;}table.sortable { border-spacing: 0; border: 1px solid #000; border-collapse: collapse;}table.sortable th, table.sortable td { text-align: left; padding: 2px 4px 2px 4px; border-style: solid; border-color: #444;}table.sortable th { border-width: 1px 1px 1px 1px; background-color: #ccc;}table.sortable td { border-width: 1px 1px 0px 1px;}table.sortable tr.odd td { background-color: #ddd;}table.sortable tr.even td { background-color: #fff;}The code seems it can give the difference color for ODD or EVEN row from output.I try to set the code avariable by add a <link rel="stylesheet" type="text/css" href="example.css"/> between <head> and </head> tag.The border parts worked. but the background-color wasn't. Can anyone can tell me how to make the color working?Thank you,

Link to comment
Share on other sites

background-color is the correct property, so those rules will change the background color of any td element inside of a tr with the certain class on it, inside of a table with the sortable class.
But it doestion work at the following PHP+HTML code. Should I change some of my code?echo " <table class='sortable' id='mybrowse' align=center height=69 > <tr><th width=100><font face=arial size=2/><div align=center><strong>Patient ID</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Name</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Education</strong></div></font></th> <th width=248><font face=arial size=2/><div align=center><strong>Address</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Family number</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Test order</strong></div></font></th> </tr>"; while ($row= mysql_fetch_array($result)){ //loop until all records from the table are selected echo "<tr>"; echo "<td><font face=arial size=2/>". $row[ 'P_ID' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'v1' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V2' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V3' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V4' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V5' ] ."</font></td>"; echo "</tr>";}echo "</table>";
Link to comment
Share on other sites

Where do you assign the class name to the <tr> elements?
I assigned the class name like this:echo " <table class='sortable' id='mybrowse' align=center height=50 > <tr class='sortable' ><th width=100><font face=arial size=2/><div align=center><strong>Patient ID</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Name</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Education</strong></div></font></th> <th width=248><font face=arial size=2/><div align=center><strong>Address</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Family number</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Test order</strong></div></font></th> </tr>"; while ($row= mysql_fetch_array($result)){ //loop until all records from the table are selected echo "<tr class='sortable' >"; echo "<td><font face=arial size=2/>". $row[ 'P_ID' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'v1' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V2' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V3' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V4' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V5' ] ."</font></td>"; echo "</tr>";}echo "</table>"; But it still doesn't work.
Link to comment
Share on other sites

Where do you assign the class name to the <tr> elements?
The Javascript is supposed to do that.
But it still doesn't work.
Use Firebug to inspect the rows in the table to make sure they actually have the class names. In Firebug, you can click the Inspect icon and then click on any element on the page and it will show you the code for that element, make sure the tr elements actually have the correct class names.
Link to comment
Share on other sites

The Javascript is supposed to do that.Use Firebug to inspect the rows in the table to make sure they actually have the class names. In Firebug, you can click the Inspect icon and then click on any element on the page and it will show you the code for that element, make sure the tr elements actually have the correct class names.
The all of tr elements are actually at the same class: 'sortable'
Link to comment
Share on other sites

They need to look like 'odd' or 'even'. That's why I asked how you were assigning the classnames. You need a way to know if the row is odd or even, and then to write the correct class name. That means you'll need a counter in your loop and a way to test it. Here's the abbreviated version of one technique:$i++;$class = $i % 2 ? 'odd' : 'even';echo "<tr class='$class' >";

Edited by Deirdre's Dad
Link to comment
Share on other sites

The Javascript script is doing the actual sorting, so the rows might appear in an order other than what they are printed in PHP. The Javascript should assign the odd or even class name after it does the reorder. This is the script in question:http://yoast.com/articles/sortable-table/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...