Html non straight border liner for tables - html

Question

I want to make a table via Html/Css (Javascript if needed) which basically looks like this:
As you can see there every row in this table has a bottom border, which starts above an image in the table, and then goes down to the other columns.
Is there any way to do this? (Maybe with a transparent image?)

Answer 1

You can use a psudo element with a rotation to solve this:
Check out this jsfiddle
http://jsfiddle.net/zRMLr/
You will likely have to play with the numbers a lot to get it to work with whatever you want.
what I used in this demo (no images) BUT only works for IE9+
html:
<table>
<tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
<tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
<tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
</table>
css:
table {
width: 400px;
}
td:first-child {
border-top: 1px solid black;
width: 20px;
}
td:first-child:after {
content: '';
border-top: 1px solid black;
display: block;
width: 28px;
height: 1px;
float: left;
position:relative;
top: -5px;
left: 24px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
td:first-child div {
width: 10px;
height: 10px;
background-color: red;
}
td:nth-child(2) {
width: 14px;
}
td:last-child {
border-bottom: 1px solid black;
}

Answer 2

What you may do to achieve the desired effect is:
Create a div with a left/right border
Rotate using CSS3 rules the div to give this effect
Or
create a div with a left/right border
use border radius to have the desired effect
I hope this helps, if you would like I can bring some sample of code for you