This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > April 2006 > table gutter spacing in CSS
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
table gutter spacing in CSS
|
|
| phil-news-nospam@ipal.net 2006-04-28, 7:03 pm |
| I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
| |
|
|
| Steve Pugh 2006-04-29, 6:51 pm |
| Stan Brown <the_stan_brown@fastmail.fm> wrote:
>28 Apr 2006 22:41:33 GMT from <phil-news-nospam@ipal.net>:
>
>I'm sure there is, but I don't understand your question.
>
>The columns are _part_of_ the table, no? Then what do you mean by
>"spacing between those columns and the table" -- how can there be
>space between a thing and part of itself?
I would guess he means to increase the spacing between the borders of
cells of adjacent columns, but between the borders of the cells in the
outermost columns and the borders of the table.
Going across the row:
table border - border-spacing - cell - border-spacing - cell -
border-spacing - cell - border-spacing - table border
So the objective is to have different values for the outer two lots of
border-spacing than for the inner two.
As the border-spacing property is set for the whole table this isn't
easily done with CSS.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
| |
| Neredbojias 2006-04-29, 6:51 pm |
| To further the education of mankind, Steve Pugh <steve@pugh.net>
vouchsafed:
>
> I would guess he means to increase the spacing between the borders of
> cells of adjacent columns, but between the borders of the cells in the
> outermost columns and the borders of the table.
>
> Going across the row:
> table border - border-spacing - cell - border-spacing - cell -
> border-spacing - cell - border-spacing - table border
>
> So the objective is to have different values for the outer two lots of
> border-spacing than for the inner two.
>
> As the border-spacing property is set for the whole table this isn't
> easily done with CSS.
Without actually having tried it, I think it's just a matter of perspective
(-and table padding and table borders. Of course padding isn't spacing,
but...)
--
Neredbojias
Infinity has its limits.
| |
| phil-news-nospam@ipal.net 2006-04-29, 6:51 pm |
| On Sat, 29 Apr 2006 05:55:45 -0400 Stan Brown <the_stan_brown@fastmail.fm> wrote:
| 28 Apr 2006 22:41:33 GMT from <phil-news-nospam@ipal.net>:
|> I have a table with 3 columns in 1 row. I want to increase the spacing
|> _between_ the columns (gutter) _without_ increasing the spacing between
|> those columns and the table itself. Is there a way to do that in CSS
|> without having to code in extra dummy columns in HTML to create gutters?
|
| I'm sure there is, but I don't understand your question.
|
| The columns are _part_of_ the table, no? Then what do you mean by
| "spacing between those columns and the table" -- how can there be
| space between a thing and part of itself?
The gutter is the space specifically between the cells, borrowed from the
newspaper typesetting term used for the space between columns, which is
what I'm using cells for in this case.
There certainly can be space between the cells. The cells AND the space
are part of the table.
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
| |
| phil-news-nospam@ipal.net 2006-04-29, 6:51 pm |
| On Sat, 29 Apr 2006 11:30:48 -0400 Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:
| To further the education of mankind, Steve Pugh <steve@pugh.net>
| vouchsafed:
|
|>>The columns are _part_of_ the table, no? Then what do you mean by
|>>"spacing between those columns and the table" -- how can there be
|>>space between a thing and part of itself?
|>
|> I would guess he means to increase the spacing between the borders of
|> cells of adjacent columns, but between the borders of the cells in the
|> outermost columns and the borders of the table.
|>
|> Going across the row:
|> table border - border-spacing - cell - border-spacing - cell -
|> border-spacing - cell - border-spacing - table border
|>
|> So the objective is to have different values for the outer two lots of
|> border-spacing than for the inner two.
|>
|> As the border-spacing property is set for the whole table this isn't
|> easily done with CSS.
|
| Without actually having tried it, I think it's just a matter of perspective
| (-and table padding and table borders. Of course padding isn't spacing,
| but...)
However, padding goes everywhere. I don't want to increase that. I just
want to increase that which is between cells of the same row ... between
the <td> elements within a <tr> of a <table>.
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
| |
| phil-news-nospam@ipal.net 2006-04-29, 6:51 pm |
| On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve@pugh.net> wrote:
| Stan Brown <the_stan_brown@fastmail.fm> wrote:
|
|>28 Apr 2006 22:41:33 GMT from <phil-news-nospam@ipal.net>:
|>> I have a table with 3 columns in 1 row. I want to increase the spacing
|>> _between_ the columns (gutter) _without_ increasing the spacing between
|>> those columns and the table itself. Is there a way to do that in CSS
|>> without having to code in extra dummy columns in HTML to create gutters?
|>
|>I'm sure there is, but I don't understand your question.
|>
|>The columns are _part_of_ the table, no? Then what do you mean by
|>"spacing between those columns and the table" -- how can there be
|>space between a thing and part of itself?
|
| I would guess he means to increase the spacing between the borders of
| cells of adjacent columns, but between the borders of the cells in the
| outermost columns and the borders of the table.
|
| Going across the row:
| table border - border-spacing - cell - border-spacing - cell -
| border-spacing - cell - border-spacing - table border
|
| So the objective is to have different values for the outer two lots of
| border-spacing than for the inner two.
|
| As the border-spacing property is set for the whole table this isn't
| easily done with CSS.
I had been trying to do it with the marging setting and that was not having
any effect. However, I tried it with the padding setting and it seems to
be working now.
td { padding-left: 24px; }
td:first-child { padding-left: 0px; }
But I still need to find a way to sequeeze the extra space off the edges
of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
in the HTML on the table element.
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
| |
| Neredbojias 2006-04-29, 10:54 pm |
| To further the education of mankind, phil-news-nospam@ipal.net
vouchsafed:
> I had been trying to do it with the marging setting and that was not
> having any effect. However, I tried it with the padding setting and
> it seems to be working now.
>
> td { padding-left: 24px; }
> td:first-child { padding-left: 0px; }
>
> But I still need to find a way to sequeeze the extra space off the
> edges of the table. HTML seems to force 2 pixels there unless I do
> cellspacing=0 in the HTML on the table element.
With what you have, try this (in styles section):
table {
border-collapse:separate;
border-spacing:0px;
}
Bear in mind it doesn't work with IE6 but neither does first-child.
--
Neredbojias
Infinity has its limits.
| |
| Steve Pugh 2006-04-30, 6:49 am |
| phil-news-nospam@ipal.net wrote:
>On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve@pugh.net> wrote:
>| Stan Brown <the_stan_brown@fastmail.fm> wrote:
>|
>|>28 Apr 2006 22:41:33 GMT from <phil-news-nospam@ipal.net>:
>|>> I have a table with 3 columns in 1 row. I want to increase the spacing
>|>> _between_ the columns (gutter) _without_ increasing the spacing between
>|>> those columns and the table itself. Is there a way to do that in CSS
>|>> without having to code in extra dummy columns in HTML to create gutters?
>|>
>|>I'm sure there is, but I don't understand your question.
>|>
>|>The columns are _part_of_ the table, no? Then what do you mean by
>|>"spacing between those columns and the table" -- how can there be
>|>space between a thing and part of itself?
>|
>| I would guess he means to increase the spacing between the borders of
>| cells of adjacent columns, but between the borders of the cells in the
>| outermost columns and the borders of the table.
>|
>| Going across the row:
>| table border - border-spacing - cell - border-spacing - cell -
>| border-spacing - cell - border-spacing - table border
>|
>| So the objective is to have different values for the outer two lots of
>| border-spacing than for the inner two.
>|
>| As the border-spacing property is set for the whole table this isn't
>| easily done with CSS.
>
>I had been trying to do it with the marging setting and that was not having
>any effect.
Table cells don't have margins.
> However, I tried it with the padding setting and it seems to
>be working now.
Ah. I assumed that you had visible borders on your table cells and
wanted the space between the borders (i.e. the CSS border-spacing
property) to be variable. IF you have no borders then padding will
allow you to do everything you want.
>td { padding-left: 24px; }
>td:first-child { padding-left: 0px; }
You'll need to add a class to the first cell to cope with IE's
non-support of the :first-child pseudoclass.
>But I still need to find a way to sequeeze the extra space off the edges
>of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
>in the HTML on the table element.
That would be the browser's default cellpadding/border-spacing (the
two are largely analogous). Setting it to zero in CSS in IE is done by
setting border-collapse: collapse (yes even if you have no borders).
Setting it to non zero values in CSS in IE is trickier.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
| |
| phil-news-nospam@ipal.net 2006-04-30, 7:01 pm |
| On Sun, 30 Apr 2006 11:08:12 +0100 Steve Pugh <steve@pugh.net> wrote:
| phil-news-nospam@ipal.net wrote:
|
|>On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve@pugh.net> wrote:
|>| Stan Brown <the_stan_brown@fastmail.fm> wrote:
|>|
|>|>28 Apr 2006 22:41:33 GMT from <phil-news-nospam@ipal.net>:
|>|>> I have a table with 3 columns in 1 row. I want to increase the spacing
|>|>> _between_ the columns (gutter) _without_ increasing the spacing between
|>|>> those columns and the table itself. Is there a way to do that in CSS
|>|>> without having to code in extra dummy columns in HTML to create gutters?
|>|>
|>|>I'm sure there is, but I don't understand your question.
|>|>
|>|>The columns are _part_of_ the table, no? Then what do you mean by
|>|>"spacing between those columns and the table" -- how can there be
|>|>space between a thing and part of itself?
|>|
|>| I would guess he means to increase the spacing between the borders of
|>| cells of adjacent columns, but between the borders of the cells in the
|>| outermost columns and the borders of the table.
|>|
|>| Going across the row:
|>| table border - border-spacing - cell - border-spacing - cell -
|>| border-spacing - cell - border-spacing - table border
|>|
|>| So the objective is to have different values for the outer two lots of
|>| border-spacing than for the inner two.
|>|
|>| As the border-spacing property is set for the whole table this isn't
|>| easily done with CSS.
|>
|>I had been trying to do it with the marging setting and that was not having
|>any effect.
|
| Table cells don't have margins.
No, but it would have been a way to do it if they had.
|> However, I tried it with the padding setting and it seems to
|>be working now.
|
| Ah. I assumed that you had visible borders on your table cells and
| wanted the space between the borders (i.e. the CSS border-spacing
| property) to be variable. IF you have no borders then padding will
| allow you to do everything you want.
|
|>td { padding-left: 24px; }
|>td:first-child { padding-left: 0px; }
|
| You'll need to add a class to the first cell to cope with IE's
| non-support of the :first-child pseudoclass.
I'm not going to worry about IE. I'll include a "Get Firefox" Icon/link.
|>But I still need to find a way to sequeeze the extra space off the edges
|>of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
|>in the HTML on the table element.
|
| That would be the browser's default cellpadding/border-spacing (the
| two are largely analogous). Setting it to zero in CSS in IE is done by
| setting border-collapse: collapse (yes even if you have no borders).
| Setting it to non zero values in CSS in IE is trickier.
And Firefox? Or are you just doing IE?
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
| |
| Steve Pugh 2006-04-30, 7:01 pm |
| phil-news-nospam@ipal.net wrote:
>On Sun, 30 Apr 2006 11:08:12 +0100 Steve Pugh <steve@pugh.net> wrote:
>| phil-news-nospam@ipal.net wrote:
>|
>|>td { padding-left: 24px; }
>|>td:first-child { padding-left: 0px; }
>|
>| You'll need to add a class to the first cell to cope with IE's
>| non-support of the :first-child pseudoclass.
>
>I'm not going to worry about IE. I'll include a "Get Firefox" Icon/link.
Or just let IE users have a slightly different presentation (not as
good in your eyes but as no one else is likely to see it in more than
one browser, probably no one else will notice or care). Get Browser X
buttons are generally a waste of space and effort.
>|>But I still need to find a way to sequeeze the extra space off the edges
>|>of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
>|>in the HTML on the table element.
>|
>| That would be the browser's default cellpadding/border-spacing (the
>| two are largely analogous). Setting it to zero in CSS in IE is done by
>| setting border-collapse: collapse (yes even if you have no borders).
>| Setting it to non zero values in CSS in IE is trickier.
>
>And Firefox? Or are you just doing IE?
FireFox, Opera, Safari, etc., etc. support border-spacing and hence
don't need extra mollycoddling.
In your case border-collapse: collapse will suffice for all browsers
as that automatically sets border-spacing to zero.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|