border-image issue

Hello,

 I am trying to wrap an html table in a border-image. I have the code working how I want it on jsfiddle (link on my page) but it is not working on Squarespace.

Maybe some conflicting css? Maybe a picture size issue? I have tried 2000 px wide down to 400 px wide.  I have tried classes, ids, border-image-source, border-image-slice, etc. Please help. 

Go to https://wldktz.com/table-designs

The screenshot is from Squarespace gray border.  The tiger skin border is from the jsfiddle.

Thank you!

@j_design add border-collapse: unset; to your code

table.borderimgtiger {
    border-style: solid;
    border-color: transparent;
    border-width: 50px 25px 50px 25px;
    -moz-border-image: url(/s/tiger_skin_400.jpg) 20 20 20 20 round round;
    -webkit-border-image: url(/s/tiger_skin_400.jpg) 20 20 20 20 round round;
    -o-border-image: url(/s/tiger_skin_400.jpg) 20 20 20 20 round round;
    border-collapse: unset;
}
 

Wow! Thank you soooo much @tuanphan for your expertise!!! I am hardly an expert but I have never even heard of border-collapse: unset. That solved it 100%! I struggled with that one for a while.