css table formatting

Forum Moderators: not2easy

Message Too Old, No Replies

css table formatting

i just want row dividers not colunms

shumboom

9:51 pm on Jun 25, 2009 (gmt 0)

I have a 2 col table which I am trying to format with css. I want a border around the table and just row separators but my separators keep overlapping into my table border. What is the best way of removing column dividers using css?

thanks Shumit

html:

<table class="worker" >
<tr>
<th>Phone Numbers : </th><td>123456 514 238</td></tr>
<tr><th>Email : </th> <td >me@web.com</td> </tr>
</table>

css:

table.worker{
border: 1px #aabfd4 solid;
width: 440px;
background-color: #fff;
border-collapse: collapse;}

.worker th
{
background-color: #dafff5;
border-bottom: #ffffff solid;}

.worker td{
background-color: #dafff5;
border-bottom: #ffffff solid;
}

jameshopkins

2:21 pm on Jun 26, 2009 (gmt 0)

I assume by 'row seperators' you're referring to the bottom border being applied to 'table.worker'?

To fix the issue you're having, add the TABLE attributes 'cellpadding="0"' and 'cellspacing="0"', and remove 'border-collapse:collapse'.

swa66

3:48 pm on Jun 26, 2009 (gmt 0)

in border-collapse:collapse mode there is an algorithm called "border conflict resolution" to decide what color (even if there is a border at all) a border will have when there are conflicting instructions.

[w3.org...]

See rule #4

To make it work you need to get the table to win over the cell and that's not going to happen in rule #4, so you might try to make the table border a bit thicker instead e.g. 1.01px ?

Unfortunately none of the browsers I looked at seem to care for the measure specified but instead will only look at the measure they'll render it with.
(I tried FF, safari and opera, all latest versions). So it'll only work if you make the border on the table 2px thick.

An alternative might be to fix it in the cascade before you get to drawing borders at all and e.g. not set the bottom border, but set the top border on all but the first row (:first-child pseudo class, or the adjacent sibling combinator "+")

Note that rule#1 is not properly implemented in legacy IE versions ...

SO that yields something like:


<!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" lang="en">
 <head>
  <title>test</title>
  <style type="text/css">
   .worker {
    border: 1px green solid;
    width: 440px;
    border-collapse: collapse;
   }
   .worker th, .worker td{
    border-top: 1px red solid;
   }
   .worker tr:first-child th, .worker tr:first-child td{
    border-top: none;
   }
  </style>
 </head>
 <body>
  <table class="worker">
   <tr>
    <th>Phone Numbers :</th>
    <td>123456 514 238</td>
   </tr>
   <tr>
    <th>Email :</th>
    <td>me@example.com</td>
   </tr>
  </table>
 </body>
</html>

I changed the colors to make it easier to spot

Tested in FF, safari and oepra, leaving IE as an exercise for the reader.

Note that IE6 doesn't do either of the :first-child, nor the tr+tr sibling combinator, leavind little choice to fix it but add either some javascript solution like e.g. IE7.js to teach IE how to do CSS 2.1 selectors, or to go the ugly path and add a class to the first row ...

shumboom

10:26 am on Jun 28, 2009 (gmt 0)

Wow - thanks - I didnt even know about first-child!