Table Border Spacing With CSS
Posted: Mon Apr 22, 2002 7:46 am
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?
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! 
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 × 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 × 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 × 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 × 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>