One-pixel table border with CSS

Problem

I want to have a one-pixel one-color solid border around a table and its cells. Adding border="1" to the table tag isn’t suitable, because it looks horrific in most of the browsers.

Source: One-pixel table border with CSS

I was confronted with this same problem in phpWebsite. I was using a table to display the pedigree of a horse with the border set by using border="1". I am not sure what it was doing but it looked pretty ugly. His solution for a default one-pixel border looked pretty simple and elegant and I was determined to figure out a way to use it.

table
{
    border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}

td
{
    border-color: #600;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px;
    background-color: #FFC;
}

When I tried to use this code as the default definitions for table and td elements used by phpWebsite I found it affected multiple areas I did not want changed. I needed to refine its use via selectors and the ID selector was my first choice. I had used the Class selector before and it involved a lot more work adding it on table and td elements. The design of phpWebsite uses section templates for creating formatted content on web pages. So I added the above CSS code to my site CSS but prefaced it with the #mytable ID so that I would override the default table definitions only in #mytable blocks. Then I created a new section template to wrap a <div id="mytable"> around the existing content. All I needed to do was go back and update the existing sections containing the tables to use the new template. Within a fairly short time all of my tables had their ugly border replaced with a simple 1 pixel border.

Technorati tags: ,