Advanced Search

background-image para las filas de una tabla

/ Published in: XHTML
Save to your folder(s)
Gracias a este artículo, pude colocar fondos de imagen a para las filas de una tabla.

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.