Chrome 1px is inevitable Distance between td

Question

I have a problem that only appears in Chrome and nowhere else. I have a table that has a style applied to it on hover. In other browsers, the style is applied when you hover over any part of the line. However, in chrome, on the edge of each td, the style no longer applies. If I “test the item” at this small 1px width between cells, the toolbar shows that Chrome considers me to be inside the table, but not inside the row itself. Here is the code that produces this effect:

CSS

table.tablesorter tbody tr:hover { background: #8dbdd8; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0px; border: none; } 

HTML:

  <table id="myTable" class="tablesorter"> <thead> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> </thead> <tbody> <tr> <td>Bach</td> <td>42526</td> <td>Dec 10, 2002 5:14 AM</td> </tr> <tr> <td>Doe</td> <td>243155</td> <td>Jan 18, 2007 9:12 AM</td> </tr> <tr> <td>Conway</td> <td>35263</td> <td>Jan 18, 2001 9:12 AM</td> </tr> </tbody> </table> 

Has anyone seen this before / knew about it?

If this helps, I use Chrome 13.0.782.220.

Live demo: http://jsfiddle.net/yNPtU/

Answer 1

Interestingly, this is not caused by the border. If you set the border width to 10px, there is still only 1px between the cells, which causes this.

I tried setting the tds position, which seemed to work. Here is a demo: http://jsfiddle.net/lnrb0b/6harr/

Note. . I added an add to keep a consistent size.

Answer 2

As already mentioned in this question , this will solve it:

 td { padding: 2px 5px; position:relative; } 

And JsFiddle .

Answer 3

The table has cellpadding and cellspacing by default. You will need to add:

 <table cellspacing="0" cellpadding="0"> 

Answer 4

Give border-spacing: -1px in css.