manipulating internal table borders with CSS

[brothercake]

Using a border style on a table creates a surrounding border.

How can I manipulate the size and color of the *internal* borders, through CSS?

[Jerome]

Hello,

A table is built up with tr's and td's (i know You know!), however my question is: do You mean the border of a td or tr, if yes you can give them an ID or Class

If no I didn't got Your question

Jerome

[brothercake]

I mean

<table border="1">

I'd like to be able to control (ideally) the size or visibility of the border, but definitely its color.

I thought of TD borders - but that would create double-thickness where they touch.

[Jerome]

Do you mean like:

#tableid
{
border:1px solid red;
}

or

#tableid
{
border:5px double #123456;
}

Jerome

[kansel]

Since cellspacing is defined for the entire table, all cells will touch or not touch the same way


<style>
table { border: 1px solid red; }
td { border: 1px solid red; }
</style>
<table border="1" cellpadding="2" cellspacing="0" width="50%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>


In the above table all cells are touching and yes, create a 2px or double-thick border. Increasing the cellspacing to 1 or 2 creates an individual 1px border around each cell with space in between. You can of course ID separate TDs and give them different borders. If you specify a large enough value for cellspacing, your CSS TD borders won't touch.

<edit>
Of course there are NBSPs between the <td> and </td> tags, but they don't show up.
</edit>

[Jerome]

Before I forget:

1.
It's also possible to control a part of the border, like top, left, etc, which can be interesting to use.

2.
And with JavaScript You can also change/control borders...

Well I think there's enough to make You think about design this week-end, the problem is always there are to many possibilities....

Jerome

[brothercake]

But none of them quite right ...

- cellspacing would allow me to control what is effectively a uniformly single-width border, by specify a table background color, and then a different td background color. But I need this for print, and the default in most browsers is not to print background colors

- using border-left etc ... that would presume I know the table in advance - that it's constructed with different classnames for the corners and edge cells; but I need something generic that can work with any table (lots of different tables which are generated on the fly, so by implication, they can't have predictable TD attributes)


Essentially, the old IE-proprietary "BORDERCOLOR" attribute is what I want, but controllable through CSS.

Or even better, a simple switch whereby 'border="0"' for screen but 'border="1"' for print.

But attributes aren't settable in CSS; And it's not possible to specify media for DOM scripting (afaik).


Thanks all for your suggestions :thumbsup: but I'm starting to think it simply isn't possible ..

[Jerome]

Aha,

This is a very advanced question.

To my knowledge You are using tables only for tabular data in your design, no divs.

When with this matter You are using a combination of a table/tr/td with divs nested in them, should that be a possibility?

@display: no div
@print: div

I hope You can do something with it...

Jerome

[jkd]

Using "outline" on the tds should work. If not, look at the "border-spacing" property.

[brothercake]

Originally posted by jkd
Using "outline" on the tds should work. If not, look at the "border-spacing" property.
Allright, I'll check those out. Looks like I need to brush up on my CSS2 as well ;)


Jerome - thanks for that; I hadn't considered double-outputting the table, and using a global print/screen display on them; it may still come to that if all else fails ...!


<note to="self"> Don't give up too easily ... </note>

[jkd]

Look here:
http://www.w3.org/TR/REC-CSS2/tables.html#borders

I think it's what you're asking for.

[ronaldb66]

Jkd,

outstanding suggestion; i've been wrestling with CSS table borders before as well and i resorted to Brothercake's first suggestion, but this is far more elegant. Only works in CSS2 browsers, of course.