Question

我正在尝试将图像放在HTML表格中而不更改表格边框。我的意思是，我试图将图像放在某个单元格中，以便图像在单元格之外伸展而不增加单元格的大小（因此，如果图像中有任何重叠或重叠的方式）。）默认情况下，当我将图像放入单元格时，它会增加单元格的大小，以便下面的文本会被“按下”，如果你愿意的话。

Answer 1

您可以在图像中使用绝对定位，就像在这个小提琴中一样： http://jsfiddle.net/8d92j/2/

然后，您可以隐藏图像或让图像溢出。要隐藏它，请使用隐藏在<div>上的溢出并删除图像上的绝对定位。

Answer 2

您可以指定表格单元格的宽度并将overflow: visible;添加到其样式中，然后图像应该完成它的操作并推出它自然想要的距离。

如果您希望图像独立于单元格中的其他所有内容，请将position: relative;应用于表格单元格，将position: absolute;应用于图像。然后，您可以相应地使用top，right，bottom和/或left值来相对于其（表格单元格）容器轻推图像。

Answer 3

我没有尝试这个，但是将单元格位置设置为相对于溢出到可见，并且图像位置设置为绝对应该有效。

Answer 4

您需要进行两项更改才能达到您想要的效果。

首先，将宽度值应用于表格单元格

其次，将css display：block应用于表格单元格

<table>
    <tr>
        <td style="width:50px;display:block">
            <img height="100" width="100" src="myImage.jpg" />
        </td>
    </tr>
</table>

将图像放在HTML表格中

4 个答案: