表格单元格中带有图片的额外空间html

我已经在stackoverflow和其他网站上进行了大量搜索，并且尚未找到适用于我的单个解决方案。我附上了网页截图，以便更清楚地看到问题。如果任何人有任何提示或技巧，我的代码还没有尝试过，请让我知道！我尝试过以前的很多类似帖子的所有想法，但由于某些原因，他们都没有为我工作。提前致谢。表格单元格中带有图片的额外空间html

enter image description here

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; 
}

来源

2015-04-24 user3192682

如果您可以提供一个工作环节或的jsfiddle话，我可以帮你更好的 –

而且你想解决什么问题？现有类似问题的答案以何种方式失败？ –

您的图像真的是568.5像素宽296.5？半像素看起来像有趣的测量。 – wunth

您已将您的.png图片定义为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>

来源

2015-04-24 23:23:56

就是这样，谢谢！ – user3192682

的填充已经在你的CSS和表格单元格设置为0，是由利润的影响，所以这不是问题。表格单元格扩展到其内容的大小。您的图片每张568.5px x 296.5px。为了摆脱这个额外的空间，减少标记中图像的大小，或在选择的图像编辑器中裁剪它们。

来源

2015-04-24 23:03:55

表格单元格中带有图片的额外空间html

回答

相关问题