DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Making Bordercolor Work In FireFox / Mozilla

05.17.2005
| 38710 views |
  • submit to reddit
        IE and Safari support the bordercolor attribute directly on TABLE elements which colors the external and internal borders. FireFox does not, but you can use standard CSS to fix it.

TABLE { border: 1px solid #eee; }
TABLE TD { border: 1px solid #eee; }

Unlike most solutions, this also correctly changes the color of the cell borders.    

Comments

Snippets Manager replied on Wed, 2009/06/03 - 7:57pm

Wow! I know this is old news, but it helped me to finally fix my table border colors in my game site. So far I have only used it in my chat codes file for my table of smileys, but I am sure I will find many more uses for this code, as I continue to build my site. With everyone's suggestions above, I added this to my css file; /** TABLES WITH ALL BORDERS COLORED */ /** TABLE 1 */ #mytable1 { border: 4px solid #660000; } #mytable1 td { border: 2px solid #660000; } /** TABLE 2 */ #mytable2 { border: 2px solid #660000; } #mytable2 td { border: 1px solid #660000; } If you would like to see what it looks like in the game, you can sign up at http://www.warriox.net/signup.php?ref=1 and go to "The Gathering Place". Below the chat (The Gathering Place), there is a link for "Chat Codes & Text Colors". Click on it and scroll down to see the table of smileys with the borders now colored with the above css code. Thanks again for all the wonderful suggestions! :)

Snippets Manager replied on Mon, 2012/05/07 - 2:12pm

Pyrofyr: Define an ID for your table: css: #mytable1, #mytable1 td {border: 1px solid #eee;} html:
content

Snippets Manager replied on Mon, 2007/02/05 - 10:02pm

This is pretty old, but I need to know if there is a way to make it only apply to a certain table, as it's not working for me in a separate CSS document, as the layout of the website I am fixing is created almost totally in tables, so when I try to use this rule, it applies to the whole website. Is the only other way to add it straight to the code?

Snippets Manager replied on Thu, 2006/03/16 - 10:26pm

tidier: /* same rule, applied to two elements */ table, table td {border: solid 1px #eee;}

Snippets Manager replied on Thu, 2006/03/16 - 10:26pm

why not just this: /* same rule, applied to two elements */ table, table td {border: solid 1px #eee;}