0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user3292653
  • 602
  • 1
  • 7
  • 25

1 Answers1

0

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

Barnee
  • 3,212
  • 8
  • 41
  • 53
  • Thank you for this answer. Is there a way to make it over the full table (width:100%)? I tried it, but it didn´t work: http://jsfiddle.net/qU7Ba/3/ – user3292653 Mar 10 '14 at 15:02
  • sorry, you have misunderstood me. I don´t want to make it over the whole width of table, the ribbon should be appear before and after. So the content area of is 100% and the effect of the ribbon should be not inside the table – user3292653 Mar 10 '14 at 17:06
  • Now I got it! Please see example 4 and 5 – Barnee Mar 11 '14 at 07:04