HTML Element Style How to - Add border by direction to table cell








Question

We would like to know how to add border by direction to table cell.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.print-table {<!-- ww  w. j a v a 2 s .  co m-->
  width: 700px;
  border-collapse: collapse;
}

.print-table td {
  padding: 2px;
}

.text-center {
  text-align: center;
}

.border-top {
  border-top: 1px solid #000;
}

.border-bottom {
  border-bottom: 1px solid #000;
}

.border-left {
  border-left: 1px solid #000;
}

.border-right {
  border-right: 1px solid #000;
}
</style>
</head>
<body>
  <table class="print-table">
    <tbody>
      <tr>
        <td class="border-top border-bottom border-left" colspan="2">1</td>
        <td class="border-top border-bottom border-left">4</td>
        <td class="border-top border-bottom border-right">5</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="border-top border-bottom border-left border-right"
          colspan="2">6</td>
        <td colspan="2">9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The code above is rendered as follows: