HTML Help

jackiebull · Joined: 12 Nov 2009 Posts: 1

i had a simple two column table with 20 rows. i need a vertical rule to separate columns and rules under each row. i used the rules=all which gave me two vertical rules, one after the first column and one after the last column – one too many. i did get a rule under each row, though which is good.

I then inserted a column in the middle so that I could use the colgroup tag. I had to tell it there were 3 columns after the first to get it to work, but it worked, except in IE 6 there is still a faint vertical rule at the end. the big problem is, now i don't have horizontal rules. the <hr> tag gives too much space above it and below.

code looks like this now:
<table width="429" border="1" cellspacing="0" cellpadding="0" frame="void" rules=groups>

<COLGROUP></COLGROUP>
<COLGROUP SPAN=3></COLGROUP>

how do i get one vertical rule between columns and a rule after each row. i'm thinking this should not be so hard.

thanks in advance

sticks464 · Joined: 31 Dec 2006 Posts: 2627

You'll need a little css help and giving the table an id.

This method works with the exceptions;
IE col border is light colored.
FF puts bottom border on last row.
Safari, Opera and Chrome does not have a bottom border on last row.

css
Code: <style type="text/css">
#test td {border-bottom:1px solid #000;}
</style>

Code: <table id="test" width="429" border="1" cellspacing="0" cellpadding="0" frame="void" rules="cols">
<colgroup>
<COL>
<COL>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

This works in all browsers

css
Code: <style type="text/css">
#test td {
border-bottom:1px solid #000;
border-right:1px solid #000;
}
#test .last {border-right:0;}
</style>

Code: <table id="test" width="429" cellspacing="0" cellpadding="0">
<colgroup>
<COL>
<COL>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td class="last">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="last">6</td>
</tr>
</table>