首页 > html > border_collapse > CSS Property Value - 如何separate和collapse边框

CSS Property Value - 如何separate和collapse边框

border_collapse 【border_collapse】
我们想知道如何separate和collapse边框。
代码展示 运行结果 


<html>
<head>
<style>
h1 {
  font-size: 18pt;
}

p {
  font-size: 12pt;
}

table.one {
  border-collapse: collapse;
}

table.two {
  border-collapse: separate;
}

td.a {
  border-style: dotted;
  border-width: 3px;
  border-color: #000000;
  padding: 10px;
}

td.b {
  border-style: solid;
  border-width: 3px;
  border-color: #333333;
  padding: 10px;
}

table {
  margin-bottom: 20px;
}
</style>
</head>
<body>
  <h2>border-collapse:collapse</h2>
  <table class="one">
    <tr>

      <td class="a">cell a collapse</td>

      <td class="b">cell b collapse</td>

    </tr>

    <tr>

      <td class="b">cell b collapse</td>

      <td class="a">cell a collapse</td>

    </tr>

  </table>


  <h2>border-collapse:separate</h2>
  <table class="two">

    <tr>

      <td class="a">cell a separate</td>

      <td class="b">cell b separate</td>

    </tr>

    <tr>

      <td class="b">cell b separate</td>

      <td class="a">cell a separate</td>

    </tr>
  </table>


</body>

</html>