Custom Table Look via CSS
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>| Attachment | Size |
|---|---|
| gridsample.gif | 21.8 KB |
caffinephil posted this at 11:08 — 29th February 2008.
They have: 99 posts
Joined: Feb 2008
Could you give a link to the full code so I can have a mess around with different stylesheets?
Jack Michaelson posted this at 16:03 — 29th February 2008.
He has: 1,733 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).
Shakespeare: onclick || !(onclick)
Greg K posted this at 16:26 — 29th February 2008.
He has: 2,145 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
webwiz posted this at 18:40 — 29th February 2008.
He has: 629 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
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.