Question

我在做实验时遇到过这个问题。所以我正在做的是有一个表格，当我点击一个按钮时，它会将图像附加到表格中的某些特定单元格。但是，每次出现图像时表格都会变形（您可以在下面的附图中看到）。显示：块不起作用。我试图在css中添加display：block到img标签作为默认值，它也没有用。

Image

这是我添加图片的代码：

$("table").find("tr").eq(1).find("td").eq(1).append("<img src='image.png' style='display:block;' width='100%' height='auto'/>");

这是我对表的css（box是表的id）：

#box {
        height: 400px; 
        width: 400px;
        position: fixed;
        margin-left: -200px;
        margin-top: -200px;
        top: 50%;
        left: 50%;
    }

任何人都知道如何解决这个问题？感谢。

Answer 1

您需要为表格单元格指定固定的宽度和高度，以便在添加图像时不会失真。

function addImage() {
  $("table").find("tr").eq(1).find("td").eq(1).append("<img src='https://kbob.github.io/images/sample-5.jpg' style='display:block;' width='100%' height='auto'/>");
}

table img {
  width: 200px;
}
table td {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>  
</table>
<button onClick='addImage()'>Click</button>

试试这个并告诉我这是否符合您的要求。

Answer 2

如果您想保持所有表格单元格的维度不变，那么您必须

将常量宽度和高度设置为全部td（或）
为图像添加新的div容器，设置宽度和高度

表变形的原因是，由于没有设置表格单元格的设置尺寸，附加图像的行和列保留高度和宽度，其他没有数据的行和列变得很小< / p>

使用jQuery将图像拟合到表格单元格

2 个答案: