How can you remove the padding between table cells? CSS forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 107.20.129.212
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS

Forum Library : Charter : Moderator: open
CSS Forum

How can you remove the padding between table cells?

Skier88

msg:4378047 4:30 pm on Oct 22, 2011 (gmt 0)

I'm trying to remove all the padding between cells in a table (vertical padding doesn't matter, it's horizontal that I care about). In most browsers border-collapse:collapse; works, but in chrome and safari there is a 1px region between cells which has the background-color of the proceeding cell or its contents, yet it not part of that cell. I have only observed this issue with Chrome 14.0.835.202 and Safari 5.1 on Windows XP.

Here's an example which illustrates what I'm talking about. Note that the entire table is black, yet there is a 1px region between each cell which you can mouse over without turning any cell red.

<!doctype html>
<html lang='en'>
 <head>
 <meta charset='utf-8'>
 <title>table test</title>
 <style type='text/css'>
  *  {margin:0; padding:0; border:0; outline:0;}
  body  {padding:20px;}
  table {width:200px; height:50px; border-collapse:collapse; border-spacing:0; 
background:#0f0;}
  td  {width:20%; background:#000;}
  td:hover {background:red;}
 </style>
 </head>
 <body>
 <table><tr>
  <td></td>
  <td></td>
  <td></td>
 </tr></table>
 </body>
</html>

I've found that you can work around this by making the cell's content extent 1px outside the cell, but this introduced issues like flickering hover-states and blending of opaque content.

[edited by: alt131 at 11:15 am (utc) on Oct 24, 2011]
[edit reason] Side Scroll [/edit]

mozartman

msg:4378113

9:02 pm on Oct 22, 2011 (gmt 0)

Add this attribute cellspacing="0" to your table.

<table style="width: 100%; border-collapse:collapse;" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>

The border-spacing property sets the distance between the borders of adjacent cells only for the "separated borders" model.

table
{
border-collapse:separate;
border-spacing:10px 50px;
}

Skier88

msg:4378118

9:10 pm on Oct 22, 2011 (gmt 0)

Thanks, but the 1px gutter is still showing up. Is it just my system or are you seeing this too?

lucy24

msg:4378135

10:06 pm on Oct 22, 2011 (gmt 0)

fwiw: I get the effect in SubEthaEdit's html preview, which uses Apple Webkit. Also Safari, so I didn't try Chrome.

I've found that you can work around this by making the cell's content extent 1px outside the cell

Did you try
td {text-indent: -1px;}
?

I tried it in conjunction with making each cell a little different:

td.green { background-color:#060;}
td.red { background-color:#600;}
td.blue { background-color:#006;}

to make it easier to see if there were problems on the overlap. Only tried it with one non-AWk browser, though.

rainborick

msg:4378189

1:38 am on Oct 23, 2011 (gmt 0)

Try changing the table width to 201px so that its evenly divisible by three. I'm not even sure I saw the effect in the first place due to my poor mousemanship, but the one place I did see it appeared to vanish with this change.

lucy24

msg:4378198

2:16 am on Oct 23, 2011 (gmt 0)

! I didn't even think of that until you posted. The cell widths are over-constrained: three cells with a combined width of 60% obviously won't work, so interpretation is up to the UA. And percentage widths seem to be pretty iffy at the best of times.

If you want to make your head spin, read
[w3.org...] (Tables)
and
[w3.org...] (width algorithms in general)
... and the CSS3 equivalents, which I can't find :(

penders

msg:4378792

6:15 pm on Oct 24, 2011 (gmt 0)

Interesting... I see this too, in Chrome and Safari. But even if you correct the widths to make them 'add up' it still does it as far as I can see?! (eg. table to width:201px and td width:33.3% or 67px)

I also tried table width:200px and 4 table-cells each of width:50px and still there is a 1px region between the cells that does not trigger a :hover state - yet there is no gap between the cells when the background-color changes.

lucy24

msg:4378965

3:09 am on Oct 25, 2011 (gmt 0)

See what happens if you set a text-indent: -1px on the table cells. The weird thing for me (Safari and SEE preview) is that the gap problem goes away for the whole table-- I made a second row for more testing-- even if I only attach the property to one cell.

penders

msg:4379080

9:46 am on Oct 25, 2011 (gmt 0)

See what happens if you set a text-indent: -1px on the table cells.

This doesn't appear to make any difference for me.

Skier88

msg:4379221

4:52 pm on Oct 25, 2011 (gmt 0)

Thanks for all the replies. Sorry the example is sloppy - I was actually testing on a table with 5 cells, so all the math was nice and even, I just messed it up when I was simplifying it for the example.

I tried text-indent and it's an imrovement, but there are bugs. This is a little complex, so bear with me. First off, the cells should have something in them, like   - assume for the rest of what I say the cells have text in them. Text-indent by itself it doesn't have any effect, but with the nbsp the gutter is gone and the backgrounds don't overlap, but where the gutter used to be is a sort of indefinite region - run your mouse up that 1px vertical line and the hovered cell will flicker between the two bordering cells. By itself that isn't too bad, but I want to add a title to every cell. And when the the title pops up, and more than half of the title box is inside the <tr>, the indefinite region becomes a flickering region. Which is to say as long as your cursor remains on that vertical line, even without moving, the hovered cell flickers between the two neighboring cells as fast as your computer can go.

Now, this is better than content that extends outside of the cell in that the backgrounds don't overlap, but identical in the presence of the indefinite region which is exacerbated by a title attribute.

I also took the concept and applied it to my actual application, which is filling each cell with an anchor with 100% width and height. It still needs some text, but this eliminates the indefinite region. However, the flickering when there is a title popup more than 50% within the table is still there.

Everything I've said was only tested in Chrome, but I think we've established this is a webkit issue.

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / CSS

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

CSS Forum