Maintaining Table Height After Adding Cell Borders

[pennstump]

I have a 4x6 data table with 100% width and a rather large (18px) font. I would like to add a colored border around certain cells as that cell's data is "checked off."

I have the process down using JSF and CSS. My CSS is pretty basic, but effective: { border-top: 3px solid green; border-left: 3px solid green; border-bottom: 3px solid green; background-color: #ccffcc; }

What I would like to do is maintain the height of the cell after the 3px borders are implemented. Today, each highlighted row can add 6px -- stretching the table and pushing things off of the bottom of the page. So, my question is: how can I programmatically add this border without changing the height of the rows / cells of my table?

I have tried making a border of the same background color by default on each cell, but with my row colors this won't work. I've also tried padding: -3px; -- which didn't work for me, either. Does anyone have any suggestions for me?

Thanks.

 

[BillyRayPreachersSon]

Does anyone have any suggestions for me?

Yes - what you have already suggested yourself but haven't managed to get working for some reason:

I have tried making a border of the same background color by default on each cell, but with my row colors this won't work.

If you make the border colour for each cell the same as the background colour for that cell initially, then you should have no problem.

With the little information you have given about the background colour scheme, I cannot see why you're unable to do this, however.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[pennstump]

I will try to clear up my description. I want to draw the border around multiple, dynamic cells of the table.

In the table below, I would need to put a border around 0, 1, or 2 of these combinations:

- ab,ef
- cd
- gh,kl -or- gh,kl,op

[tt]----------------------------------
| a | b | c | d |
----------------------------------
| e | f | g | h |
----------------------------------
| i | j | k | l |
----------------------------------
| m | n | o | p |
----------------------------------
| q | r | s | t |
----------------------------------
| u | v | w | x |
----------------------------------[/tt]

Since, a border around [cd] would require two borders on the first row and a border around [ab,ef] would only require a border on the top of the first row -- I can't seem to statically maintain row / table height. Would reducing the height of the <td> in the <tr> maybe work?

Also, I have alternating background colors (white and gray) for the <tr>'s of the table for easier reading, so that's why I wasn't immediately able with my current implementation to put the borders of certain background colors around each cell -- unless I don't have to specify the color and it will default to the current row background... I don't think it will, does anyone know for sure?

Thanks.

 

[ChrisHunt]

One way to do it:

table {
   border-collapse: collapse 
}

tr.odd td {
   background: #fff;
   border: 3px solid #fff;
}

tr.even td {
   background: #ccc;
   border: 3px solid #ccc;
}

tr.odd td.checked,
tr.even td.checked {
   border-color: green;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd