homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How can you remove the padding between table cells?

 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'>
<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;
td {width:20%; background:#000;}
td:hover {background:red;}

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]



 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">

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

border-spacing:10px 50px;


 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?


 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.


 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.


 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)
[w3.org...] (width algorithms in general)
... and the CSS3 equivalents, which I can't find :(


 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.


 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.


 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.


 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 &nbsp; - 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 search open messages active posts  

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved