如何填写表格内的图像？

Question

我在桌子里面有一张桌子，我希望我的图像能够填满整个桌子而不是整张桌子。

以下是我所拥有的图片：

  

注意：我希望每张图片都覆盖整个蓝色空间

我不希望它看起来像这样：

这是我的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;}

这是我的HTML：

<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.

Answer 1

您的HTML不正确，表格结构如下所示

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

您多次错过这些行，这会给您带来不良后果

Answer 2

您的.table td有padding:15px; - 删除它，图片将占据整个单元格

Answer 3

如果您希望它们填满整个单元格，请从.table td

中删除填充