HTML Element Style How to - Add table border to be consistent throughout table and nested table

Question

We would like to know how to add table border to be consistent throughout table and nested table.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from  www.  j av  a2s  .  c  o m-->
  border-collapse: collapse;
}

table.outer {
  border: 1px black solid;
  border-collapse: collapse;
  width: 750px;
}

table.outer td {
  border: 1px black solid;
  border-collapse: collapse;
}

table.nested {
  width: 750px;
}

table.nested td {
  border: 1px black solid;
  border-collapse: collapse;
}
</style>
</head>
<body>
  <table class="outer">
    <tr>
      <td>foo 1</td>
      <td>foo 2</td>
      <td>foo 3</td>
    </tr>
    <tr colspan="3">
      <table class="nested">
        <tr>
          <td>bar 1</td>
          <td>bar 2</td>
          <td>bar 3</td>
          <td>bar 4</td>
        </tr>
      </table>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: