How to create a table with a thin (1 pixel) border

May 8th, 2009 in Web UI Programming. 10 comments
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

If you are not very experienced in web development, you would think that the task of creating a table with a one pixel border would be rather trivial. Apparently not. Even after you struggle with your limited css/html knowledge and think you have finally worked out a solution, you may find to your frustration that it does not work across browsers.

Here’s a solution that works with Firefox, IE 6/7, Opera and Chrome. I haven’t gotten a chance to test it in Safari so any feedback would be appreciated. Since this solution uses a css class for styling, other tables (if any) in the webpage are free to use different styles.

<head>
<style type="text/css">
 table.mystyle
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
}

.mystyle td, .mystyle th
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    border-style: solid;
}
</style>
</head>
<body>
 <table class="mystyle">
  <tr>
   <th>One</th><th>Two</th><th>Three</th>
  </tr>
  <tr>
    <td>Cell 1,1</td><td>Cell 1,2</td><td></td>
  </tr>
  <tr>
    <td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td>
  </tr>
 </table>
</body>

Here’s what you should see:
aonepxtable How to create a table with a thin (1 pixel) border

Tags: ,

10 Responses to “How to create a table with a thin (1 pixel) border”

  1. VV at
    September 24th, 2009 at 9:24 pm says:

    Nice, by using “border-collapse: collapse” to get rid of “double stacked border” which thicker the border.

  2. kris at
    October 20th, 2009 at 11:02 am says:

    Thanks! ..Good one

  3. sergii at
    November 25th, 2009 at 11:16 am says:

    good stuff, thanks

  4. don at
    January 6th, 2010 at 9:36 am says:

    This works great. By chance is there an easy way to use alternating colors for the rows?

  5. admin at
    January 7th, 2010 at 12:49 pm says:

    @don:
    Should be pretty simple to do that. Just add one class for an odd row (say odd) and another one for an even row(say even), then set their background like this in the css:
    .mystyle tr.odd{
    background-color:#efefef;
    }
    .mystyle tr.even{
    background-color:#fff;
    }

  6. jezza at
    July 7th, 2010 at 4:48 am says:

    it works perfect under safari 5!

  7. Abhilal T K at
    August 10th, 2010 at 2:22 am says:

    But not working correctly in IE 8

  8. Web coder at
    March 22nd, 2011 at 12:10 pm says:

    Good one! thanks

  9. Nat at
    December 18th, 2011 at 8:05 pm says:

    Works great - thanks! Is it possible to modify the color of the border?

  10. Karthik at
    January 12th, 2012 at 4:24 am says:

    Worked really well. thanks a lot.

Leave a Reply

Sponsors