Kod na którym pracuje:
.corn {
border-collapse:inherit;
border-spacing: 0;
min-width: 350px;
}
.corn tr th,
.corn tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-image:none;
padding: 5px;
}
.corn tr th:first-child,
.corn tr td:first-child {
border-left: 1px solid #bbb;
}
.corn tr:first-child th{
border-top: 1px solid #bbb;
}
.corn tr:first-child td{
border-top: 1px solid #bbb;
font-weight:bold;
}
/* top-left border-radius */
.corn tr:first-child td:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
.corn tr:first-child td:last-child {
border-top-right-radius: 6px;
}
.corn tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
.corn tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
.corn tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
.corn tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.corn .info {
background: url('images/F1G.png') repeat-x;
}
.corn tr:last-child {
background: url('images/F3G.png') repeat-x;
}
.corn tr:first-child td {
position:relative;
height: 50px;
}
.corn tr:first-child td:first-child:before {
background: url('images/F1G.png') repeat-x;
content: " ";
width:100%;
height: 70px;
position:absolute;
top: 0;
left: 0;
z-index: -1;
}
@-moz-document url-prefix() {
table tr.disabled td:first-child:before {
display: none;
}
table tr.disabled {
background: url(disabled.png) repeat-x;
}
}
<table width="100%" class="corn"> <td colspan="2">col 1-2
</td> <td colspan="5">col 1-5
</td> <td colspan="2">col 4-5
</td> <td colspan="5">col 1-5
</td>
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