473,695 Members | 2,258 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

table gutter spacing in CSS

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/ |
-----------------------------------------------------------------------------
Apr 28 '06 #1
10 11043
28 Apr 2006 22:41:33 GMT from <ph************ **@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?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you
Apr 29 '06 #2
Stan Brown <th************ @fastmail.fm> wrote:
28 Apr 2006 22:41:33 GMT from <ph************ **@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.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Apr 29 '06 #3
To further the education of mankind, Steve Pugh <st***@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...)

--
Neredbojias
Infinity has its limits.
Apr 29 '06 #4
On Sat, 29 Apr 2006 05:55:45 -0400 Stan Brown <th************ @fastmail.fm> wrote:
| 28 Apr 2006 22:41:33 GMT from <ph************ **@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/ |
-----------------------------------------------------------------------------
Apr 29 '06 #5
On Sat, 29 Apr 2006 11:30:48 -0400 Neredbojias <http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
| To further the education of mankind, Steve Pugh <st***@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/ |
-----------------------------------------------------------------------------
Apr 29 '06 #6
On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <st***@pugh.net > wrote:
| Stan Brown <th************ @fastmail.fm> wrote:
|
|>28 Apr 2006 22:41:33 GMT from <ph************ **@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/ |
-----------------------------------------------------------------------------
Apr 29 '06 #7
To further the education of mankind, ph************* *@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:separa te;
border-spacing:0px;
}

Bear in mind it doesn't work with IE6 but neither does first-child.

--
Neredbojias
Infinity has its limits.
Apr 29 '06 #8
ph************* *@ipal.net wrote:
On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <st***@pugh.net > wrote:
| Stan Brown <th************ @fastmail.fm> wrote:
|
|>28 Apr 2006 22:41:33 GMT from <ph************ **@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 <st***@pugh.net > <http://steve.pugh.net/>
Apr 30 '06 #9
On Sun, 30 Apr 2006 11:08:12 +0100 Steve Pugh <st***@pugh.net > wrote:
| ph************* *@ipal.net wrote:
|
|>On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <st***@pugh.net > wrote:
|>| Stan Brown <th************ @fastmail.fm> wrote:
|>|
|>|>28 Apr 2006 22:41:33 GMT from <ph************ **@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/ |
-----------------------------------------------------------------------------
Apr 30 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1362
by: bjam | last post by:
Hi, I am trying to do the following, which is to have a single place to define my table paramaters such as cellpadding / cellspacing etc. Below is the code I am trying to achieve see the cell spacing element in the table html tag below. Thanks in advance for any help you can provide. I really appreciate it. This is currently not working as I can't have an xsl:value-of select inside of the table tag itself... does anyone have any ideas...
1
2778
by: Justin French | last post by:
Hi all, I've been using CSS for typography for quite some time, but have not looked into it too deep at all in regards to layout. Now is as good a time as any eh? Whilst ultimately I'll want to look at complex layouts (and can find plenty of tutorials on them already), I just want to start with the basics for the moment...
12
39113
by: Rick DeBay | last post by:
I'm trying to create a layout table, where the spacing between rows varies. I've tried using setting margin-top and border-top for the rows I wan't spaced down from the one above, and I've also tried setting it on all of the cells of that row. This hasn't worked, so I was wondering if anyone knew how it could be done. Thanks, Rick DeBay
19
17469
by: CMAR | last post by:
I have the following markup. The problem is that the browser, e.g., IE6, inserts several lines of blank space between the <div> and the following table. Is there a way to minimize that vertical spacing? Thanks, CMA <div class="vlgray">Condition</div> <table cellpadding="0" cellspacing="0">
3
2090
by: Selden McCabe | last post by:
Sometimes I want to put a table inside a cell of another table (say, to create 3 equal divisions, etc.). When I want the inner table's edges to correspond exactly with the edges of the cell, I set the border (top, left, bottom, right) to zero for both the inner table and outer table. Also padding to 0 and spacing to 0. But, for some reason, there is still some space between the bottom of the inner table and the bottom of the containing...
16
3228
by: Barbara de Zoete | last post by:
Here's what I'm trying to do: Create a table with generic style property . Have a few table cells in the thead that 'have to' melt into eachother, so needing the style . Looking somthing like: ,------------.------------. | | header |
1
5192
by: MissMarie | last post by:
I've been playing around with DIV tables in myspace to better learn how to rewrite my own code for my business site without having to pay someone to design it. I've tried embedding a slideshow into a div table and after I save it I noticed that the slideshow does not show up and the embed code I added is altered. Can anyone help me figure this out? The embed code that I'm talking about is three quarters down the code page under {PHOTOS},...
7
6462
by: Jan | last post by:
Hi: I was so sure this was easy that I left it for the last minute and now I'm stuck. I'm working on the student directory for my kids' school and since it will be printed on 3-hole punch paper, we need the margins to switch: big left margin on the even-numbered pages, big right margin on the odd-numbered pages. But I can't for the life of me figure out how to set this up, programmatically or otherwise. I searched the archives, etc....
5
4198
by: Stepheno | last post by:
Hi, I am a recently converted Iseries (AS/400) RPG programmer trying to learn HTML/CSS/JavsScript all at the same time (not fun). My problem deals mostly with CSS. I will be reveiving a table, for which number of rows/columns i will not know, and I have to pretty up the table, including a verical scroll bar. This has to work in IE6, IE7, and FireFox 3.5. The CSS I currently have will give me a scrollable table, but only if I hard code...
0
8617
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9112
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
7650
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6483
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5827
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4332
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4570
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2251
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1970
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.