Table Border Spacing With CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Brian
Forum Contributor
Posts: 116
Joined: Thu Apr 18, 2002 5:33 pm

Table Border Spacing With CSS

Post 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
User avatar
mydimension
Moderator
Posts: 531
Joined: Tue Apr 23, 2002 6:00 pm
Location: Lowell, MA USA
Contact:

Post 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.
DSM
Forum Contributor
Posts: 101
Joined: Thu May 02, 2002 11:51 am
Location: New Mexico, USA

Post 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.
lc
Forum Contributor
Posts: 188
Joined: Tue Apr 23, 2002 6:45 pm
Location: Netherlands

Post 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 ;)
Stoyanski
Forum Newbie
Posts: 15
Joined: Sun Jun 02, 2002 9:33 am
Location: BG
Contact:

Post 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
Post Reply