帶有圖像html的表格單元格中的多余空間

Question

我已經在stackoverflow和其他站點上進行了大量搜索，還沒有找到一個對我有用的解決方案。 我已附上該網頁的屏幕截圖，以便更清楚地看到問題。 如果有人在我的代碼中沒有嘗試過任何提示或技巧，請告訴我！ 我已經嘗試過以前非常相似的帖子中的所有想法，但由於某種原因，它們都對我不起作用。 提前致謝。

HTML：

<table>
  <tr>
    <td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
  </tr>
<tr>
    <td>text box describing level for java</td>
    <td>text box describing level for python</td>
    <td>text box describing level for html/css</td>
</tr>
</table> 

CSS：

table {
    border-collapse: collapse;
    border-spacing: 0px;
}
td {
    border: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    font-size: 0;

img {
    vertical-align: top;
    border: none;
    margin: 0;
    padding: 0;
    font-size:0;
    display: block;
}

Answer 1

在CSS中，填充已設置為0，並且表格單元格不受邊距的影響，因此這不是問題。 表格單元會擴展到其內容的大小。 您的圖片分別為568.5px x 296.5px。 要消除此多余空間，請減小標記中圖像的大小，或在所選的圖像編輯器中裁剪它們。

Answer 2

您已將.png圖像的with定義為568.5像素，這意味着表格寬度大約為1704 px，可能比頁面模板的寬度還要寬。

您希望圖像縮放以適合表格單元格的寬度。

您可以將寬度設置為td （33％），然后將圖像縮放到100％的寬度。

注意：我構建了一個靈活/響應式布局，我認為這可能是您所需要的。

 table { border-collapse: collapse; border-spacing: 0px; width: 100%; border: 1px solid blue; } td { border: none; padding: 0; width: 33%; } img { display: block; width: 100%; } tr.labels td { background-color: beige; /* for demo only */ text-align: center; padding: 20px 0; } tr.images td { padding: 5px; /* for demo if so needed */ } 

 <table> <tr class="images"> <td> <img border="0" alt="java" src="http://placehold.it/568x296"> </td> <td> <img border="0" alt="python" src="http://placehold.it/568x296"> </td> <td> <img border="0" alt="htmlcss" src="http://placehold.it/568x296"> </td> </tr> <tr class="labels"> <td>text box describing level for java</td> <td>text box describing level for python</td> <td>text box describing level for html/css</td> </tr> </table>