Adding a cross-browser 1 pixel, solid border around a cell

az0000000 · #1 02-Mar-2005, 10:05

Hello.
How can I add a cross-browser compatible 1 pixel solid border around cell so when I insert a new row into the table it would automatically have the needed 1 pixel solid border? Something like that:
http://www.serviciupentrupace.org/az...ell_border.jpg

WaltP · #2 02-Mar-2005, 18:36

JdS · #3 03-Mar-2005, 05:20

You could use CSS to get the desired effect. An example can be found on this page: http://www.desilva.biz/css/csstable.html

Simply put, the most important thing to look out for in the example below is this line: border-collapse:collapse.

HTML Code:


<head>
<style type="text/css">
<!--
table {
  background-color:#FFFFFF;
  width:100%;
  border-collapse:collapse;
}
td {
  background-color:#FFFFFF;
  border:1px solid black;
  padding:5px;
}
--></style>
</head>
<body>
<table>
  <tr>
    <td>C1R1</td>
    <td>C2R1</td>
  </tr>
  <tr>
    <td>C1R2</td>
    <td>C2R2</td>
  </tr>
</table>

Cross-browser? Not really sure, but it works on both Mozilla Firefox and Microsoft's Internet Explorer.

az0000000 · #4 06-Mar-2005, 02:42

Quote:

Originally Posted by JdS

You could use CSS to get the desired effect. An example can be found on this page: http://www.desilva.biz/css/csstable.html

Simply put, the most important thing to look out for in the example below is this line: border-collapse:collapse.

HTML Code:


<head>
<style type="text/css">
<!--
table {
  background-color:#FFFFFF;
  width:100%;
  border-collapse:collapse;
}
td {
  background-color:#FFFFFF;
  border:1px solid black;
  padding:5px;
}
--></style>
</head>
<body>
<table>
  <tr>
    <td>C1R1</td>
    <td>C2R1</td>
  </tr>
  <tr>
    <td>C1R2</td>
    <td>C2R2</td>
  </tr>
</table>

Cross-browser? Not really sure, but it works on both Mozilla Firefox and Microsoft's Internet Explorer.

Thanks for reply, i'll try out this.
Cheers

Corey Bryant · #5 06-Mar-2005, 08:19

Here are a few charts to help you see what styles are supported by what browsers:
http://www.corecss.com/properties/full-chart.php Or backup site: http://corecss.unk.edu/

http://www.quirksmode.org/css/contents.html

http://centricle.com/ref/css/filters/

http://www.macedition.com/cb/resourc...selectors.html

http://www.blooberry.com/indexdot/cs...y/classify.htm

az0000000 · #6 09-Mar-2005, 16:06

Quote:

Originally Posted by Corey Bryant

Here are a few charts to help you see what styles are supported by what browsers:
http://www.corecss.com/properties/full-chart.php Or backup site: http://corecss.unk.edu/

http://www.quirksmode.org/css/contents.html

http://centricle.com/ref/css/filters/

http://www.macedition.com/cb/resources/css3support_selectors.html

http://www.blooberry.com/indexdot/css/supportkey/classify.htm

Thanks a lot.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Photoshop Tutorial: Make An Inspirational/Mystical Picture	ToddSAFM	Graphics Forum	9	09-Aug-2005 20:32

Adding a cross-browser 1 pixel, solid border around a cell

CSS compatibility Charts