CSS3 Ribbon in HTML table

Question

I refer to the tutorial of CSS3-Tricks Ribbon tutorial.

I'd like to adjust the th element inside a table with CSS3 so that it looks like the ribbon in the tutorial.

I've set up a JSFiddle to test it, but unfortunately I can't do it. Can you help me?

Answer 1

Try giving display: block to .ribbon, and take off the background from the table.
Here's example 1.

Or you can try to add to the table: position:relative and z-index:-2.
Here's example 2.

Update 1
And here is with 100% width:example 3.

Update 2
example 4
example 5