Home/ Questions/Q 272941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T00:22:49+00:00

Is there any workaround for the following 1 pixel to the left bug? <!DOCTYPE

  • 0

Is there any workaround for the following “1 pixel to the left” bug?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

It looks like this:

Firefox CSS bug

Is there any pure CSS solution to this?

Edit

I was bit unclear about my table so here it is again:

With border-collapse:

Firefox CSS bug

With cellspacing=”0″ and without border-collapse as suggested:

Firefox CSS bug

So now the borders inside my table are doubled, but I want 1px border across my table.

When I remove 1px border from table I end with:

Firefox CSS bug

Borders are still doubled inside my table.

I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there’s a simpler way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove the border-collapse and use cellspacing=0 instead. 

    <table style="border: 15px solid green; width: 100%"  cellspacing="0">

    It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.

    Set your border widths to 10px in your code to see what is really happening.

    edit after OP edit

    You can use the old table “border” trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;

    table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
    • 0