Question

我发现将图像插入表格单元格很困难。当我试图用图像完全填充表格单元格时，表格单元格的大小正在增加并占据整个页面。这是我的代码：

#bar {
    height:45%;
    width: 100%;
}

table.BarTable,th,td {
    border:1px solid black;
    border-collapse: collapse;
    line-height: 0;
}

和css部分是：

interface SuperInterface{}

interface SubInterface extends SuperInterface{}

abstract class BaseClass implements SuperInterface{}

class SubClass extends BaseClass {}

Answer 1

这是因为<table>在单元格中有一个默认的间距，如果不需要我们需要清除。

<table class = "BarTable" style="width:100%;height: 100%" cellpadding="0" cellspacing="0">

Answer 2

您可以为图像单元格提供以下属性：

width: 1%;
white-space: nowrap;

这将阻止您的图像像您提供的代码一样拉伸，并且单元格将完美地包裹图像。

完整演示

＆＃13;

#bar {
  height: 45%;
  width: 100%;
}

table.BarTable,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.myclass {
  width: 1%;
  white-space: nowrap;
}

＆＃13;

<div id="bar">
  <table class="BarTable" style="width:100%;height: 100%">
    <tr>
      <td class="myclass"><img src="http://rs902.pbsrc.com/albums/ac222/jvac/pattern-background.png~c200"></td>
      <td>Everyone</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 3

图像与细胞边界之间有一点差距¿这是问题吗？只有您设置了td padding:0

#bar {
  height:45%;
  width: 100%;
}

table.BarTable,th,td {
  border:1px solid black;
  border-collapse: collapse;
  line-height: 0;
  padding:0;
}

<div id="bar">
  <table class = "BarTable" style="width:100%;height: 100%">
    <tr>
      <td style="width: 35%"><img src="http://lorempixel.com/400/200/" style="height: 100%;width: 100%"></td>
      <td>Everyone</td>
    </tr>
  </table>
</div>

将图像插入HTML中的表格单元格中

3 个答案:

完整演示