title: How to add spacing between elements of bootstrap enabled html table?
body: <p>This fiddle: <a href="https://jsfiddle.net/DTcHh/10952/" rel="noreferrer">https://jsfiddle.net/DTcHh/10952/</a> displays 8 table elements, but I'm unable to add spacing between each element.</p>
  
  <p>I've tried : </p>
  
  <pre><code>cellpadding="3" cellspacing="3" 
  </code></pre>
  
  <p>as well as:</p>
  
  <pre><code>td:nth-child(2) {
      padding-right: 20px;
  }
  </code></pre>
  
  <p>but these options do not seem to have desired effect.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="center"&gt;
  
    &lt;div&gt;
      &lt;table class="table table-bordered" cellspacing="1"&gt;
        &lt;tr&gt;
          &lt;td class="col-md-3"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td class="col-md-3" col-md-offset-2&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td class="col-md-3"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
  
  
  
          &lt;td class="col-md-4"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td class="col-md-3"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td class="col-md-3" col-md-offset-2&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td class="col-md-3"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
  
  
  
  
          &lt;td class="col-md-4"&gt;
            &lt;div class="header"&gt;&lt;a href="{{ module.hrefTitle }}" target="_blank"&gt;test2&lt;/div&gt;
  
            &lt;div class="title truncated-anchors"&gt;&lt;a title="{{module.title}}" href='test");'&gt;test&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="date"&gt;test&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>