| Refresh | Home EGTry.com

individually set sides of border


CommentsHTML sourcedisplay in your current browser
Top and bottom sides
<style type="text/css">
#table1 {
    border-top: double;
    border-bottom: double;
    border-right: blank
}

</style>

<table id="table1"  width="250">
  <tr>
    <th>cell 11</th>
    <th>cell 12</th>
  </tr>
  <tr>
    <td>cell 21</td>
    <td>cell 22</td>
  </tr>
  <tr>
    <td>cell 31</td>
    <td>cell 32</td>
  </tr>
</table>

cell 11 cell 12
cell 21 cell 22
cell 31 cell 32
left and right rules
<style type="text/css">
#table2 {
    border-left: double;
    border-right: double;
   
}

</style>

<table id="table2"  width="250">
  <tr>
    <th>cell 11</th>
    <th>cell 12</th>
  </tr>
  <tr>
    <td>cell 21</td>
    <td>cell 22</td>
  </tr>
  <tr>
    <td>cell 31</td>
    <td>cell 32</td>
  </tr>
</table>

cell 11 cell 12
cell 21 cell 22
cell 31 cell 32
No left and right table border
<style type="text/css">
table.hbar {
	border-top:solid;
	border-bottom:solid;
}

td.rightb {
	border-right:solid 1px black
}
td.topb {
	border-top:dotted 1px black
}

</style>

<table class="hbar" width="300"  cellspacing="0" cellpadding="10" >
  <caption>
    3 columns
  </caption>
  <tr align="top">
    <td  class="rightb">cell 11 </td>

    <td class="rightb">cell 13</td>

    <td>cell 13</td>
  </tr>
  <tr align="top">
    <td class="topb rightb">cell 21</td>

    <td class="topb rightb">cell 23</td>

    <td class="topb">cell 13</td>
  </tr>
  <tr align="top">
    <td class="topb rightb">cell 31</td>

    <td class="topb rightb">cell 33</td>

    <td class="topb">cell 13</td>
  </tr>
</table>

3 columns
cell 11 cell 13 cell 13
cell 21 cell 23 cell 13
cell 31 cell 33 cell 13
use css selectors
<style type="text/css">

#table1 { border-top:solid; border-bottom:solid;}
#table1 tr:first-child th {border-right:solid 1px black}
#table1 tr:first-child  th:last-child {border-right:none}

#table1 td {border-top:dotted 1px black; border-right:solid 1px black}
#table1 tr td:last-child {border-top:dotted 1px black; border-right:none}

</style>
<table id="table1" width="200" cellspacing="0" cellpadding="0">
  <tr>
    <th>cell 11</th>
    <th>cell 12</th>
    <th>cell 13</th>
  </tr>
  <tr>
    <td>cell 21</td>
    <td>cell 22</td>
    <td>cell 23</td>
  </tr>
  <tr>
    <td>cell 31</td>
    <td>cell 32</td>
    <td>cell 33</td>
  </tr>
</table>

cell 11 cell 12 cell 13
cell 21 cell 22 cell 23
cell 31 cell 32 cell 33