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

Forum Moderators: not2easy

Message Too Old, No Replies

How can you remove the padding between table cells?

Skier88

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

10+ Year Member

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

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

10+ Year Member

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

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

10+ Year Member

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

lucy24

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

! 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

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

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

10+ Year Member

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.