Posted By

demixo on 09/11/08


Tagged

css html tablas


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
saeed


background-image para las filas de una tabla


 / Published in: XHTML
 

URL: http://www.plexusweb.com/staff/colin/blog/post/95/Need-a-background-image-on-a-table-row

Gracias a este artículo, pude colocar fondos de imagen a para las filas de una tabla.

  1. /*
  2. Don't do it the intuitive way...
  3. */
  4. <tr style="background: url(/images/tr-background.gif) no-repeat 0 0;">
  5. <td>Row 1</td>
  6. <td>Row 2</td>
  7. <td>Row 3</td>
  8. </tr>
  9.  
  10. /*
  11. ...because it doesn't work in IE6 or Safari, even if you set
  12. the <td> background element to 'transparent' or 'none'.
  13. But you can still make it happen with just the one image:
  14. */
  15.  
  16. <tr>
  17. <td style="background: url(/images/tr-background.gif) no-repeat 0 0;">Row 1</td>
  18. <td style="background: url(/images/tr-background.gif) no-repeat 50% 0;">Row 2</td>
  19. <td style="background: url(/images/tr-background.gif) no-repeat 100% 0;">Row 3</td>
  20. </tr>
  21.  
  22. /*
  23. You're just altering the background-position of the image, so that
  24. what should be on the left goes on the left (at 0), the middle
  25. part goes to the middle (50% horizontally), and the last part goes
  26. at the end (100%). Remember that values in the background-position
  27. element are ordered horizontal, then vertical, unlike the margin
  28. and padding elements.
  29.  
  30. And, of course, you'll want to separate presentation from content
  31. by putting the CSS elsewhere and classing the td's.
  32. */

Report this snippet  

You need to login to post a comment.