 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / April 2006table 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?  Signature----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ | | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ | ----------------------------------------------------------------------------- 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? SignatureStan 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/2003/05/05/why_we_wont_help_you >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 [quoted text clipped - 7 lines] >"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 Signature"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/> 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 [quoted text clipped - 13 lines] > 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...) SignatureNeredbojias Infinity has its limits. | To further the education of mankind, Steve Pugh <steve@pugh.net> | vouchsafed: [quoted text clipped - 20 lines] | (-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>. Signature----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ | | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ | ----------------------------------------------------------------------------- |>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 [quoted text clipped - 21 lines] | 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. Signature----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ | | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ | ----------------------------------------------------------------------------- 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 [quoted text clipped - 6 lines] > 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. SignatureNeredbojias Infinity has its limits. >|>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 [quoted text clipped - 24 lines] >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 Signature"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/> |>|>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 [quoted text clipped - 26 lines] | | 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. [quoted text clipped - 9 lines] | 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 [quoted text clipped - 4 lines] | 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? Signature----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ | | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ | ----------------------------------------------------------------------------- >|>td { padding-left: 24px; } >|>td:first-child { padding-left: 0px; } [quoted text clipped - 3 lines] > >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 [quoted text clipped - 6 lines] > >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 Signature"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/> | 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 [quoted text clipped - 7 lines] | "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. Signature----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ | | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ | ----------------------------------------------------------------------------- |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.