Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][Html] background image w wierszu tabeli
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Xart Irok
2.04.2013, 22:28:18
Kod na którym pracuje:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. .corn {
  5. 	border-collapse:inherit;
  6.     border-spacing: 0;
  7.     min-width: 350px;
  8. }
  9. .corn tr th,
  10. .corn tr td {
  11.     border-right: 1px solid #bbb;
  12.     border-bottom: 1px solid #bbb;
  13. 	border-image:none;
  14.     padding: 5px;
  15. }
  16. .corn tr th:first-child,
  17. .corn tr td:first-child {
  18.     border-left: 1px solid #bbb;
  19. }
  20. .corn tr:first-child th{
  21.     border-top: 1px solid #bbb;
  22. }
  23. .corn tr:first-child td{
  24.     border-top: 1px solid #bbb;
  25. 	font-weight:bold;
  26. }
  27.  
  28. /* top-left border-radius */
  29. .corn tr:first-child td:first-child {
  30.     border-top-left-radius: 6px;
  31. }
  32.  
  33. /* top-right border-radius */
  34. .corn tr:first-child td:last-child {
  35.     border-top-right-radius: 6px;
  36. }
  37.  
  38. .corn tr:first-child th:first-child {
  39.     border-top-left-radius: 6px;
  40. }
  41.  
  42. /* top-right border-radius */
  43. .corn tr:first-child th:last-child {
  44.     border-top-right-radius: 6px;
  45. }
  46.  
  47. /* bottom-left border-radius */
  48. .corn tr:last-child td:first-child {
  49.     border-bottom-left-radius: 6px;
  50. }
  51.  
  52. /* bottom-right border-radius */
  53. .corn tr:last-child td:last-child {
  54.     border-bottom-right-radius: 6px;
  55. }
  56. .corn .info {
  57. 	background: url('images/F1G.png') repeat-x;
  58. }
  59. .corn tr:last-child {
  60. 	background: url('images/F3G.png') repeat-x;
  61.  
  62. }
  63. .corn tr:first-child td {
  64. 	position:relative;
  65. 	height: 50px;
  66. }
  67. .corn tr:first-child td:first-child:before {
  68. 	background: url('images/F1G.png') repeat-x;
  69. 	content: " ";
  70. 	width:100%;
  71. 	height: 70px;
  72. 	position:absolute;
  73. 	top: 0;
  74. 	left: 0;
  75. 	z-index: -1;
  76. }
  77. 		@-moz-document url-prefix() {
  78. 			table tr.disabled td:first-child:before {
  79. 				display: none;
  80. 			}
  81. 			table tr.disabled {
  82. 				background: url(disabled.png) repeat-x;
  83. 			}
  84. 		}
  85. </style>
  86. </head>
  87. <body>
  88. 		<table width="100%" class="corn">
  89.             <tr>
  90.                 <td colspan="2">col 1-2</td>
  91.                 <td>col 3</td>
  92.                 <td>col 4</td>
  93.                 <td>col 5</td>
  94.             </tr>
  95.             <tr class="info">
  96.             	<td colspan="5">col 1-5</td>
  97.             </tr>
  98.             <tr class="show">
  99.                 <td>col 1</td>
  100.                 <td>col 2</td>
  101.                 <td>col 3</td>
  102.                 <td colspan="2">col 4-5</td>
  103.             </tr>
  104.             <tr>
  105.                 <td colspan="5">col 1-5</td>
  106.             </tr>
  107.         </table>
  108. </body>
  109. </html>
[HTML] pobierz, plaintext

Chce w pierwszym i ostatnim wierszu tabeli wrzucić grafikę tak aby została rozciągnięta (zduplikowana) na cały wierszu, aby była ciągła. Efekt zamierzany chciał bym że by był taki: http://projects.keaglez.com/tablerow/index.html
artuross
2.04.2013, 22:45:44
Tam gdzie first-child i last-child po prostu wstawiasz background: url(grafika.png) repeat-x;
Xart Irok
2.04.2013, 22:49:24
Cytat(artuross @ 2.04.2013, 23:45:44 ) *
Tam gdzie first-child i last-child po prostu wstawiasz background: url(grafika.png) repeat-x;

Próbowałem tak, ale nie wyświetla w taki sposób jaki bym chciał. last-child był łatwo rozwiązany bo była tylko jedna cała kolumna, mam najgorszy problem z tr:first-child.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.