blue-sky blue-sky - 13 days ago 5
CSS Question

How to add spacing between elements of bootstrap enabled html table?

This fiddle: https://jsfiddle.net/DTcHh/10952/ displays 8 table elements, but I'm unable to add spacing between each element.

I've tried :

cellpadding="3" cellspacing="3"


as well as:

td:nth-child(2) {
padding-right: 20px;
}


but these options do not seem to have desired effect.

<div class="center">

<div>
<table class="table table-bordered" cellspacing="1">
<tr>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>

<td class="col-md-3" col-md-offset-2>
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>

<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>




<td class="col-md-4">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>
</tr>

<tr>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>

<td class="col-md-3" col-md-offset-2>
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>

<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>




<td class="col-md-4">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>

<div class="date">test</div>
</td>
</tr>

</table>
</div>

</div>

Answer

Try adding the following:

table {
    border-collapse: separate;
    border-spacing: 1em;
}
Comments