HTML Element Style How to - Set table full width with margin

Question

We would like to know how to set table full width with margin.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from w  w  w.j  ava  2 s.c o m-->
  border-collapse: collapse;
  margin: auto;
  padding: 0;
  width: calc(100% - 40px);
}
</style>
</head>
<body>
  <table border=1>
    <caption>This is a table.</caption>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: