Forum Moderators: open

Message Too Old, No Replies

thicker column dividers than row dividers in table?

         

unsorted89

1:41 pm on Jul 6, 2009 (gmt 0)

10+ Year Member



I'm trying to make a table with both row dividers and column dividers, but I want some of the column dividers to be thicker (or in some way different from) the other dividers.

In other words, I want something like the code below, but where all of the invisible dividers as visible internal dividers, and all of the visible dividers as thicker visible dividers:


<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>

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

<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>

<TR> <TD>Monday</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tuesday</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>

<TR> <TD>Wednesday</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thursday</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>

<TR> <TD>Friday</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Saturday</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>

<TR> <TD>Sunday</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
</TABLE>

Is there a way to do this?

Thanks.

swa66

2:16 pm on Jul 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Should be easy enough in CSS
e.g.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
.test {
border-collapse:collapse;
border: 2px solid black;
}
.test td, .test th {
padding: 4px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px dotted black;
border-left: 1px dotted black;
}
.test th:first-child, .test td:first-child {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="test>
<thead>
<tr>
<th>Weekday</th>
<th>Date</th>
<th>Manager</th>
<th>Qty</th>
<tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>09/11</td>
<td>Kelsey</td>
<td>639</td>
<tr>
<tr>
<td>Tuesday</td>
<td>09/12</td>
<td>Lindsey</td>
<td>596</td>
<tr>
</tbody>
</table>
</body>
</html>

CSS tables and border have a bit of a complexity in it, esp the border conflict resolution is something to study a bit.

I'd suggest to skip 17.2 on a first reading (it'll confuse you), but as always the standard includes gems for those digging in:
[w3.org...]

swa66

3:19 pm on Jul 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm, seems I had a typo in there that I missed:
the class="test" on the table needs a closing quote obviously.