using different borders on all sides of td - css

Question

Is it possible with css3 to apply borders on table, tr, td so it would look like it is drawn by hand similar to:
Currently, I'm trying like the following but which results in space between tds:
table{
border-collapse: collapse;
}
td{
background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
background-size: 100% 100%;
padding: 20px;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
So, is there a way so I can use different borders on top right bottom and left of the tds?

Answer 1

You could do that by carefully crafting a table with no borders or background (so it's transparent) and using your hand-drawn graphic as a background.
If you design the background to be repeating (seamless) your table could even be dynamic.
table {
background: url(http://i.stack.imgur.com/idN4k.jpg) -10px -15px repeat;
}
table td {
padding: 20px 10px;
}
<table>
<tr>
<td width="37">one</td>
<td width="42">two</td>
<td width="42">three</td>
<td width="42">four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
</table>
http://jsfiddle.net/nhur0uu0/
This could also be achieved with custom svg, but I would want to know more about what you are going for before I recommended it.

Answer 2

You might be able to achieve something like that with border-images and applying different border images to every Nth cell with the :nth-child selectors on both rows and columns, maybe with some prime numbers thrown in to obscure repetition.
This will require border-collapse:separate tables, so you'll also want zero border spacing.
The images will have to line up properly at the corners though, so the lines can't be quite as crooked as in your example

Answer 3

You could try setting negative margins as I did here.
table {
border-collapse: collapse;
}
td {
background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
background-size: 100% 100%;
padding: 20px;
margin: -9px -8px;
display: inline-block;
}
tr {
display: block;
}
tr:nth-child(2) {
margin-left:4px;
}
tr:nth-child(3) {
margin-left:8px;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
Not too pretty, but it works.