Tuesday, September 18, 2018

3D Borders in CSS Using border-collapse


<html>
<!--The following css script snippet is used to set borders on cells and the table-->
<!--Note the utilization of the border-collapse which is used against the entire table and
also the outset and inset which give this item a 3d effect-->

<style type="text/css">
table  {
 border-collapse: seperate;
 border: 1mm outset;
 cell-spacing: 1mm
       }

td, th {
 border: 1mm inset
       }
</style>

<table>
 <th>Table header</th>
  <tr>
    <td>Text data 1</td>
  </tr>
  <tr>
    <td>Text data 2</td>
  </tr>
  <tr>
    <td>Text data 3</td>
  </tr>
  <tr>
    <td>Text data 4</td>
  </tr>
</table> 
</html>


Here is what this looks like when run in a browser:


No comments:

Post a Comment