Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

CSS : Cell borders showing up on th cells but not td

 
Kim Kantola
Ranch Hand
Posts: 276
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi All,
I have the following in my css file, and then have a table defined with <table class="whiteBoard">.

For some reason, my th cells show the black borders around the cells as I would expect, but the td cells do not. I can't figure out why the td cells have no borders. Anyone see something I am not seeing ? Thanks!

.whiteBoard {
border-width: 1px;
border-color: gray;
background-color: white;
}
.whiteBoard th {
border-width: 2px;
padding: 2px;
border-style: solid;
border-color: black;
background-color: white;
}
.whiteBoard td {
border-width: 2px;
padding: 2px;
border-style: solid;
border-color: black;
background-color: white;
}
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Browser?

Helped if you showed your basic table markup also.

Eric
 
Kim Kantola
Ranch Hand
Posts: 276
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, I am using IE as a browser.
Markup is just


The cells with the text "header 1 and header2" have borders, the data1 and data2 cells do not.

Am thinking of skippin the css and putting the style right into the <td> tag since that seems to work.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Was that a typo in your code there, you have an open tr instead of a closed tr.

Eric
 
Kim Kantola
Ranch Hand
Posts: 276
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, that was a typo. Another question if you would be so kind to invest more time in this.

I was able to get the bottom border to work for my cells by taking it out of the css file and putting it right in the td tag, but then I realized another problem. The effect I am trying to achieve, is something like a <hr> line every three rows of my table. I was able to get a border-bottom style to work on every third row, but there is a gap at each spot where one td ends and the next one starts, so the border line is not solid. I tried to add the border style onto the <tr> tag to get a solid line, but this did not produce a border at all.

I am all about getting the data on the screen, but this style stuff makes me a bit crazy! Thanks for any tips.
 
Herman Schelti
Ranch Hand
Posts: 387
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi Kim,

Your stylesheet worked fine in my browsers (IE7 and FireFox 1.5).

Maybe "border-collapse: collapse;" helps with making the borders into one:

.whiteBoard {
border-width: 1px;
border-color: gray;
background-color: white;
border-collapse: collapse;
}


Herman
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic