separate border collapse example

msi_333 · **Posted:** Thu Nov 10, 2011 12:06 am

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>
 

separate border collapse example

Users browsing similar codes