• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Another table border question

 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a table that is 10 rows and 2 columns and I need a border around every cell. The problem is that if you create a

border: solid 1px #000000;

for each cell, then you get double width on the inner border because of the left and right cell. Same for top and bottom in the middle cells.

So the other way is to specify a border for say left, top, bottom for one cell and right, top, bottom for another then as you work your way down, interchanging top and bottom accordingly. MESSY

Is there a neater easier way to apply a css border to a table that takes care of all the sides of every cell neatly and cleanly, just like the default table border attribute.

Thanks.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am to busy to test this, but this should just give a 1pixel border between everything....

TD { border: 1px solid blue;}

Am I right?

Eric
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also I have a link book,arked about tables: http://www.w3.org/TR/REC-CSS2/tables.html

bunch of stuff there if I remember correctly.

Eric
 
Pedro Penna
Ranch Hand
Posts: 46
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try the border-collapse attribute, like: style="border-collapse:collapse".
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Eric Pascarello:
I am to busy to test this, but this should just give a 1pixel border between everything....

TD { border: 1px solid blue;}

Am I right?

Eric


No, this puts a border around the cell, but if I put the same code for the cell next to it, I get 2px solid blue line down the middle.
[ July 14, 2004: Message edited by: Gregg Bolinger ]
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Pedro Penna:
Try the border-collapse attribute, like: style="border-collapse:collapse".


That doesn't do anything.
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
From what I can tell from the doc Eric linked to, there isn't a neat easy method of doing what I want to do. It looks like ass no matter what way I do it.
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is what I am talking about:

The style:



The HTML



If I add more rows, I have to add two more styles. This seems rediculous for what I am trying to achieve so I was hoping there was an easier way. I don't understand how I can say



And the border surrounds every cell appropriately, but as soon as I want to change the look of the border, the CSS is insane. BTW, did I say I hate HTML?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64171
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
HACK ALERT! HACK ALERT! But this may do what you want:

1) Choose a cellspacing of 1
2) Set the background color of the table to black (or whatever)
3) Set the td backgrounds to white

The table background shows through the spacing around the cells.

I am so ashamed I know that.
 
Pedro Penna
Ranch Hand
Posts: 46
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You don't need the "class" attribute in the table cells in this case.

Try this:



Notice the bordercolor attribute in the table tag. I know it has nothing to do with CSS and might turn future modifications in your site/application into a headache, but that's the only solution I know...
[ July 15, 2004: Message edited by: Pedro Penna ]
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Bear Bibeault:
HACK ALERT! HACK ALERT! But this may do what you want:

1) Choose a cellspacing of 1
2) Set the background color of the table to black (or whatever)
3) Set the td backgrounds to white

The table background shows through the spacing around the cells.

I am so ashamed I know that.


that's actually not a bad idea. Thanks Bear.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic