CODEWITHSUNDEEP
htmlcssimage
MattCamp
MattCamp

Reputation: 250

how to fill a <td> with an image inside a table?

I have a table inside a table and I want my images inside the to fill the entire but not the entire table.

Here is an image of what I have: enter image description here

Note: I want each image to cover the entire blue space

I don't want it to look like this: enter image description here

Here is my css:

    .table {
   
        color:#000;
        width:100%;
        border-width: 1px;
        border-color: #D9D9D9;
        border-collapse: collapse;
        }
        .table tr {
        background-color: none;
        }
        .table td {
        font-size:15px;
        border-width: 1px;
        padding:15px;
        border-style: solid;
        border-color: #D9D9D9;
        text-align: center;
        }
        .header1 {
        font-size:1em;
        color:#000;
        text-align:center;
        text-decoration:underline;}
    <table class="table" border="1">
    <td>
    <table>
               <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td>
               <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td>
               <tr>
               <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td>
               <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td>
               </tr>
               </table>
    </td>
    <td> 
    <h1 class="header1">AX Squares Tshirt</h1>
    <p>Favorite tshirt with graphics designed by the man. Heather gray. 100% Cotton.<p>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="R4HBCYS75M7P2">
    <table>
    <tr><td><input type="hidden" name="on0" value="Choose your size:">Choose your size:</td></tr><tr><td><select name="os0">
    	<option value="Small">Small $25.00 USD</option>
    	<option value="Medium">Medium $25.00 USD</option>
    	<option value="Large">Large $25.00 USD</option>
    	<option value="XL">XL $25.00 USD</option>
    </select> </td></tr>
    </table>
    <input type="hidden" name="currency_code" value="USD">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
    
    
    </td>
    </table>

Here is a fiddle.

Upvotes: 1

Views: 4834

Answers (3)

jalynn2
jalynn2

Reputation: 6457

If you want them to fill the entire cell, remove the padding from .table td

Upvotes: 1

suff trek
suff trek

Reputation: 39777

Your .table td has a padding:15px; - remove it and image will take the entire cell

Upvotes: 1

meda
meda

Reputation: 45490

Your HTML is incorrect, tables structure look like this

<table>
  <tr>
      <td></td>
  </tr>
</table>

You are missing the rows multiple times, this would give you undesired results

Upvotes: 1

Related Questions