Table with blank spaces after nth cell - html

Question

I am trying to create a table that has 1 row and 8 columns. However, I want a blank spaces after the 3rd and 6th table cell. The result should be:
cell cell cell blank space cell cell cell blank space cell cell
I have tried placing margins but they don't work. I have tried implementing this code, but it doesn't work.
.brzl td:nth-child(3){
margin-right: 20px;
}
Edit:
I am trying to implement this within an AngularJS project. In the index.html i have the following code:
<div ng-switch-when="brzl">
<table class="brzl">
<tbody>
<tr>
<td ng-repeat="cell in mini.vrednost track by $index">
{{ cell }}
</td>
</tr>
</tbody>
</table>
<label class="small-label"> {{ mini.label }} </label>
</div>
The mini.vrednost basically loops through some JSON data (e.g. "123456789").
Each digit has to be placed within separate cell in the table. Now, once the '1','2', and '3' have been placed in the cells, I need to put an empty field after them and then continue with '4', '5' etc. The empty field cannot be read from the JSON data, since the whole string is already read from somewhere (I suppose the database).
I know I should have mentioned this earlier. That was my bad.

Answer 1

Margin doesn't work on table cells. However, padding does. Of course, if you have added borders to your table, this means you get one cell with a lot of white space.
Fiddle
What you could do (through hard coding or by injecting with Javascript or jQuery) is add a blank cell where you want the white space, remove any styling of that cell through CSS and add a width.
Working fiddle
HTML
<table>
<tbody>
<tr>
<td>cell</td>
<td>cell2</td>
<td>cell3</td>
<td></td> <!-- blank cell, no border -->
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
<td></td> <!-- blank cell, no border -->
<td>cell7</td>
</tr>
</tbody>
</table>
CSS
td {
border: 1px solid #ccc;
}
td:nth-child(4n+4){
border: none;
width: 30px; /*desired blank space*/
}
As you can see, you'll have to target every 4th cell, starting with the 4th. If you have any questions, just ask and I'll see if I can adapt the answer accordingly.
UPDATE AFTER OP'S EDIT
However, since your table is filled with data by some script, you might want to run the following jQuery AFTER the loop is done filling up the table. I have no idea how it will react on huge tables with lots of content, but it works in the updated Fiddle below.
$('tr > td:nth-child(3n+3)').after('<td></td>');
This piece of jQuery takes every 3rd child, starting with the 3rd, and adds an empty <td> to it, which is then styled by the CSS. Of course you could ad a <td> with a specific class which you then target with CSS, but as it is now, it seems to work fine.
Fiddle
Remember to add jQuery!

Answer 2

As i told you, you can't use margin but you can try like this method -
table {
width: 100%;
}
td{
background: #ccc;
padding: 10px;
text-align: center;
}
td:nth-child(3n){
background: #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Or you can try this to set border on right side on nth-child
table {
border-collapse: collapse;
}
td{
background: #ccc;
padding: 10px;
}
td:nth-child(3n){
border-right:10px solid #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>

Answer 3

Try like this: Demo
td {
border: 1px solid #ccc;
padding:10px;
}
td:nth-child(4n) {
border-color: #fff;
}
HTML:
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td> <!-- 3,6,... cols should be empty to get blank space -->
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
<td>test</td>
</tr>
</table>