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>
The HTML <table> cellspacing Attribute is used to specify the space between the cells. The cellspacing attribute is set in terms of pixels. Attribute Values: pixels: It sets the space between the cells in terms of pixels.
The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not.
Try adding the following:
table {
border-collapse: separate;
border-spacing: 1em;
}
try adding this :
table {
border-collapse:separate;
border-spacing:10px 10px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With