Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding CSS background images to table rows? (tfoot / thead / tbody )

    Is this possible at all?

    I have quite a 'complicated background image that sits between the head the the content and then again between the table body and the foot.

    This is an image that has vertical and horizontal gradient styles so applying a different image to each td is not practical at all. The image spans the width of the table, fade out at each end. Is there away of wrapping the thead in something for example? I imagine this would need 'block' set to it though, which would bork the table?

    Any suggestions?

    Thanks as always, look forward to hearing your replies!


    HTML (pretty standard I think):

    Code:
    <table cellspacing="0" callpadding="0" border="0">
    	<thead>
    		<tr>
    			<th>Title 1</th>
    			<th>Title 2</th>
    			<th>Title 3</th>
    			<th>Title 4</th>
    			<th colspan="2">Title 5</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td class="product">
    				<img src="placeholder.jpg" alt="ALT TEXT." />
    				<strong class="product">Product name</strong>
    				<p>Sub heading</p>
    			</td>
    			<td>Product code</td>
    			<td>Ipsum</td>
    			<td>25</td>
    			<td>&pound;1.99</td>
    			<td><button type="submit">Remove</button></td> 
    		</tr>
    		<tr>
    			<td class="product">
    				<img src="placeholder.jpg" alt="ALT TEXT." />
    				<strong class="product">Product name</strong>
    				<p>Sub heading</p>
    			</td>
    			<td>Product code</td>
    			<td>Ipsum</td>
    			<td>25</td>
    			<td>&pound;1.99</td>
    			<td><button type="submit">Remove</button></td> 
    		</tr>
                    <tr>
    			<td class="product">
    				<img src="placeholder.jpg" alt="ALT TEXT." />
    				<strong class="product">Product name</strong>
    				<p>Sub heading</p>
    			</td>
    			<td>Product code</td>
    			<td>Ipsum</td>
    			<td>25</td>
    			<td>&pound;1.99</td>
    			<td><button type="submit">Remove</button></td> 
    		</tr>
    	</tbody>
    	<tfoot>
    		<tr class="first">
    			<td colspan="2" rowspan="3">
    				<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</strong>
    			</td>
    			<td colspan="2">Sub-total</td>
    			<td colspan="2">Amount</td>
    		</tr>
    		<tr>
    			<td>Cost</td>
    			<td colspan="2">Amount</td>
    		</tr>
    		<tr>
    			<td colspan="2">Total to Pay</td>
    			<td colspan="2">Total Amount</td>
    		</tr>
    	</tfoot>
    </table>
    And the current CSS:


    table {
    border-collapse:collapse;
    color:#583926;
    font-size:12px;
    margin:24px 0 16px;
    overflow:hidden;
    width:100%;
    }
    thead {
    background: url(../graphics/table-bg-head.png) no-repeat 0 bottom;
    }
    tbody {
    background: url(../graphics/table-bg-foot.png) no-repeat 0 bottom;
    }
    thead th {
    color:#3b1600;
    font-size:14px;
    font-weight:bold;
    padding:6px 6px 26px;
    }
    table td {
    padding:0 6px 12px;
    position:relative;
    vertical-align:middle;
    }
    table .last td {
    padding-bottom:36px;
    }
    table .first td {
    padding-top:12px;
    }
    td.product img {
    display:block;
    float:left;
    margin:0 10px 0 0;
    padding:1px 3px 3px 1px;
    position:relative;
    top:12px;
    }
    td.product strong {
    display:block;
    font-weight:normal;
    line-height:16px;
    margin:15px 0 1px 80px;
    }
    td.product p {
    color:#9d8a7f;
    line-height:14px;
    margin:0 0 0 80px;
    padding:0;
    }

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bump :/

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    can u share mock up of your layout or link of your page.. for better understanding....

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi yeah sorry...

    Here's a quick mock up of the table, they didn't want the actual mock up going up yet before the live date so I've just striped the colours out/changed them, everything else is the same though:



    As you can see, pretty standard layout for the checkout/basket table but the long images at the top and bottom of the table make it a bit awkward. Am I right in thinking you can just apply a css background image to thead, tbody or tfoot? Which is what I have done but it doesn't work in IE, Chrome and Safari, but works fine in Firefox and Opera.

    I don't think I can wrap anything around the thead, tbody or tfoot because I think its strips them out? Any ideas on a work around or should I be able to apply images to these elements?

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •