aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes CSS : Cell borders showing up on th cells but not td Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS : Cell borders showing up on th cells but not td" Watch "CSS : Cell borders showing up on th cells but not td" New topic
Author

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

Kim Kantola
Ranch Hand

Joined: May 17, 2001
Posts: 274
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Browser?

Helped if you showed your basic table markup also.

Eric
Kim Kantola
Ranch Hand

Joined: May 17, 2001
Posts: 274
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Was that a typo in your code there, you have an open tr instead of a closed tr.

Eric
Kim Kantola
Ranch Hand

Joined: May 17, 2001
Posts: 274
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

Joined: Jul 17, 2006
Posts: 387
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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: CSS : Cell borders showing up on th cells but not td