#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0

    Question 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.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    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.
  4. #3
  5. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    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;

IMN logo majestic logo threadwatch logo seochat tools logo