controling CSS table borders efficently

Dev Shed Forums Sponsor:

July 9th, 2003, 04:22 PM

zaphoyd

Junior Member

Join Date: Jul 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

controling CSS table borders efficently

My site layout generally uses tables with no borders at all. So in my global css file I have:

Code:

TABLE
{
	border-collapse: collapse;
	empty-cells: show;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-color: #$background;
}

TD
{
	padding: 4px;
	background-color: #$background;
	color: #$backtext;
	margin: 0;
}

occasionally I would like to make a table that shows all the borders. (ie a normal html table with all grid lines)

Is there any way in css to override the default table and make a table with borders when the default table has none.

I have found one way, but it is ridiculously inefficient, css is so slick in everything else, is there a way to do what I need without resorting to the following:

Code:


TABLE.border
{
	border-collapse: collapse;
	border-width: 2px;
	border: outset 2px;
}

TD.border
{
	padding: 4px;
	background-color: #$background;
	color: #$backtext;
	margin: 0;
	border: inset 1pt;
}

Then labeling EVERY SINGLE DATA CELL class=border.

######## Question 2 ########
Also is there an easy way of only showing internal borders with css. You could do it with HTML 'rules', but support for them seems to have died after css came. What I want is a balence sheet table that shows the vertical and horizontal lines between datacells, but NOT the borders of the table. I just want the cells on the edges to have one open side.

July 9th, 2003, 04:58 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 5,268

Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1955

Try this;

Code:

TABLE.border
{
	border-collapse: collapse;
	border-width: 2px;
	border: outset 2px;
}

TABLE.border  TD
{
	padding: 4px;
	background-color: #$background;
	color: #$backtext;
	margin: 0;
	border: inset 1pt;
}

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

July 9th, 2003, 05:09 PM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

Answer 2:

Dont' sepcify a border for your TABLE, or rather specify to use none, then specify the left/right borders for the cells:

Code:

border-left: 1px solid black;
border-right: 1px solid black;

controling CSS table borders efficently

Developer Shed Advertisers and Affiliates