Page Widget How to - Set Table border-spacing for table inside div








Question

We would like to know how to set Table border-spacing for table inside div.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!-- www .j av  a 2s  .c  o  m-->
  background: red;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 10px;
  width: 100%;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
  margin: 0 -10px;
  min-width: 100%;
}

td {
  background: green;
  width: 25%;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .6);
}
</style>
</head>
<body>
  <div id="container">
    <h1>This is a title</h1>
    <p>This is a paragraph.</p>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3 this is a test.</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
    </table>
  </div>
</body>
</html>

The code above is rendered as follows: