separate border collapse example

separate border collapse example on table cells , you can change the value "separate" to "collapse" to match the difference.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>border-collapse: separate</title>
  <style rel="stylesheet" type="text/css">
table.one {
  border-collapse: separate;
}

td.dotted {
  border-style: dotted;
  border-width: 3px;
  border-color: #00CC00;
  padding: 5px;
}

td.normal {
  border-style: solid;
  border-width: 3px;
  border-color: #CC0000;
  padding: 5px;
}
</style>
</head>

<body>
<h2> separate table border</h2>
<table class="one">
  <tr>
    <td class="dotted">cell dotted  </td>
    <td class="normal">cell normal  </td>
  </tr>
  <tr>
    <td class="normal">cell normal </td>
    <td class="dotted">cell dotted</td>
  </tr>
</table>


</body>
</html>
 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

Related Posts to : separate border collapse example
separate table per subclass -
Border around JPG img -
Add dotted Border to div -
Add solid Border to div -
Set border bottom color -
Add dashed border to text div -
set the size of border in pixels -
Change the border style on mouse over -
Table Border Colors for PHPBB3 -
Remove border of the linked image -

Topic Tags

HTML Table, CSS Border

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com