Page 1 of 1

Table Border Spacing With CSS

Posted: Mon Apr 22, 2002 7:46 am
by Brian
Lately, I have been thinking about table border spacing with CSS. More specifically, I have been thinking about automatic table border spacing using "border-collapse: separate". When using "border-collapse: separate", Internet Explorer 6 automatically creates space between the cells in a table. From what I have read, "border-spacing" should allow one to specify the amount of space between the cells (for example, "border-spacing: 10px"), but I have not had any luck with it whether or not borders are actually specified for the cells. Am I doing something wrong here?

Code: Select all

<!--

The table's background color shows through the spacing around the cells it contains.

The foreground color is irrelevant, but it is there to keep the World Wide Web Consortium's HTML validator from issuing a warning.  :)

-->

<TABLE STYLE="width: 100%; border-collapse: separate; border-spacing: 1px; background-color: #999; color: inherit">

  <TR>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Weapon</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Typical Damage</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Kill Chance</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Special Properties</TH>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Fist</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1-20 &#215; Player Level</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Knife</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">5-35 &#215; Player Level</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">70% (Throat Only)</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Sword</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">20-100 &#215; Player Level</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">50% + Area Modifier</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Fear (Non-Swordsmen)</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Curry of Fury (Thai Hot)</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1 (NOT &#215; Player Level!)</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1%</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Confusion; Laughter</TD>
  </TR>

</TABLE>
By the way, I have not yet tried this in Netscape 6 or Opera because I have not yet installed them on my notebook, which is now serving as my main computer. I suppose I could do so now, but it is time to get up and get ready for school in fifteen minutes. Darn... I really should have gone to sleep at some point! 8O

Posted: Tue Apr 23, 2002 6:38 pm
by mydimension
thats correct. the way IE6 handles the argument is not correct though. in fact i believe IE is dumb to this directive. depending on what effect you are looking for, you could try the margin and/or padding directives.

Posted: Sat May 18, 2002 9:52 am
by DSM
To get this effect I nest tables within tables and use the attribute cellspacing = "x" within the table tag. It works cross browser, IE,NN, & Opera all recognize the cellspacing attribute.

Posted: Sat May 18, 2002 9:39 pm
by lc
Yup cellspacing is grand.. though there is a downside... You can use the table bgcolor in IE to show the cellspacing as a subtle border, but NN disregards the table bgcolor.

Thus you get a different look for both browsers, if you set the table bgcolor. Ehm... but I do it anyway ;)

Posted: Mon Jun 03, 2002 2:06 pm
by Stoyanski
IE6 differs with the way it handels width & heights (spacing is related to width of left & right laying elements :wink: ) from earlier versions of IE. So You can be shure of that if You look at your page in IE5 it will be 'quite'different. :x

Evternal life to MS