首页 > html > td > HTML Element Style - 如何按表格单元格的方向添加边框

HTML Element Style - 如何按表格单元格的方向添加边框

td 【td】
我们想知道如何按表格单元格的方向添加边框。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.print-table {
  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>