Not sure if this is possible or not, so thought would ask here.
Using CSS, is it possible to assign a different vertical and horizontal cellspacing? I will give you an example, see the attached image for the final look we are wanting to achieve.
We are alternating colors for every other row, however want the vertical line between the columns.
For now I have it set for cellpadding=0, cellspacing=0 and then add an extra cell on each row that is a "blank" image,sized to be 2x2. Also becasue cellpadding is set to zero, all data displayed is given a before and after it.
While this achieves the effect we want, as you can see in the image, now that the new site design ate up a ton of space, the final table width is limited, so as you can see in the image, now some row's data wraps to more than one line. And because of the cellpadding being 0, it butts up against the left side of the table... Looks bad.
So was looking for a possible way to design this better. I'm stumped. Below is the code for a section of the table. Again, it worked good when we had a design that didn't make anything wrap to two lines. Now the site is designed for 1024x768, yet there is now even LESS room.... sigh...
Thanks in advance for your help.
-Greg
<tr>
<td class="cmdDk" rowspan="1" width="28"><a href="/go/expenses/edit/132"><img src="/live/themes/main/img/editItem.jpg" alt="Edit" border="0" height="24" hspace="2" vspace="1" width="22"></a></td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkC"> Included </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkR"> 1092</td>
<td class="cellDkL"> </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkL"> Insurance:Work Comp </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkR">$0.29</td><td class="cellDkR"> <span style="font-weight: bold; color: rgb(136, 0, 0);">D</span> </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellTotDkR"> $0.29 </td>
</tr>
<tr>
<td class="cmdLt" rowspan="1" width="28"><a href="/go/expenses/edit/133"><img src="/live/themes/main/img/editItem.jpg" alt="Edit" border="0" height="24" hspace="2" vspace="1" width="22"></a></td>
<td class="cellltGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellLtC"> Included </td>
<td class="cellltGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellLtR"> 1093</td>
<td class="cellLtL"> </td>
<td class="cellltGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellLtL"> Insurance:Work Comp:Work Comp Disc. </td>
<td class="cellltGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellLtR">$0.38</td><td class="cellLtR"> <span style="font-weight: bold; color: rgb(136, 0, 0);">D</span> </td>
<td class="cellltGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellTotLtR"> $0.38 </td>
</tr>
<tr>
<td class="cmdDk" rowspan="1" width="28"><a href="/go/expenses/edit/134"><img src="/live/themes/main/img/editItem.jpg" alt="Edit" border="0" height="24" hspace="2" vspace="1" width="22"></a></td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkC"> Included </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkR"> 1094</td>
<td class="cellDkL"> </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkL"> Internet </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellDkR">$0.12</td><td class="cellDkR"> <span style="font-weight: bold; color: rgb(136, 0, 0);">D</span> </td>
<td class="celldkGap" rowspan="1" width="2"><img src="/live/img/gap.gif" alt="" border="0" height="1" width="2"></td>
<td class="cellTotDkR"> $0.12 </td>
</tr>'
[This space intentionally left blank]
Cool Geek Supplies: www.ThinkGeek.com
| Attachment | Size |
|---|---|
| gridsample.gif | 21.8 KB |
caffinephil posted this at 11:08—29th February 2008.
They have: 100 posts
Joined: Feb 2008
Could you give a link to the full code so I can have a mess around with different stylesheets?
Make Money Blogging | Yeast Infection Cure
Jack Michaelson posted this at 16:03—29th February 2008.
He has: 1,717 posts
Joined: Dec 1999
Hmmm, don't know if I really understand your question. From what I get from it: why not at a css-padding to the cell classes?
or else: an extra element (yuck,) for instance a div, inside the td's. Those div's can have different vertical and horizontal margins (preventing padding to be added to the table's width).
Daft Punk Alive 2007 DVD
Greg K posted this at 16:26—29th February 2008.
He has: 1,597 posts
Joined: Nov 2003
Can't link to the page itself, as it is used by our customers only. For the sample code given above, all the styles do is define a font, text color, and background color, and left/right justification. Nothing else is set with style sheets.
I will try the css-padding jack mentioned, sounds like that might be the winner! I forgot you can define that in CSS as well, I was focusing more on the cell spacing. I will post back here when I'm able to give a try after a little while.
-Greg
[This space intentionally left blank]
Cool Geek Supplies: www.ThinkGeek.com
webwiz posted this at 18:40—29th February 2008.
He has: 276 posts
Joined: May 2007
You might do better using just CSS for styling, instead of setting widths etc. in the HTML. If I were you, I would create a COLGROUP/COL for each column and apply the widths and background-colors there[1]. I see no need for all those classes for every cell. As for the row striping, I would use a smidgen of JavaScript[2].
I guess I don't understand what all those "rowspan=1" attributes do.(?)
[1] http://www.htmldog.com/guides/htmladvanced/tables/
[2] http://www.alistapart.com/articles/zebratables
Cordially, David
--
"Old web developers don't die, they degrade gracefully..."