I wonder if it is even possible creating a table with diagonal border line using css or jquery just like below:
Any ideas will be appreciated.
Anything is possible if you fiddle around with it long enough, here's an example using some creative borders and a lot of CSS:
.arrow_box:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
And another one using CSS3 rotate:
-webkit-transform: rotate(26.5deg);
-moz-transform: rotate(26.5deg);
-ms-transform: rotate(26.5deg);
-o-transform: rotate(26.5deg);
transform: rotate(26.5deg);
or you could just use an image as the background for your table.