带有图像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张图片的格式定义为568.5像素，这意味着桌面宽度约为1704像素宽，可能比页面模板的宽度宽。

您希望图像缩放以适合表格单元格的宽度。

您可以将宽度设置为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>