Question

我想在带有标题的网页中显示多个表格，并在表格单元格中显示图像。为了实现这一点，我创建了一个表并使用<div>标记来指定<td>.的宽度和高度

请找到以下代码

<table width="100%" height="100%"><tr><td>
    <div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
        <section>
            <header style="background: gray;width:198.5px;text-align: center">Header1</header>
        </section>
        <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
    </div></td>
    <td>
        <div  style="position:absolute;border: 1px solid black;width:200px;height:200px";>
            <section>
                <header style="background: gray;width:198.5px;text-align: center">Header2</header>
            </section><br><br>
            <br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
        </div></td>

    </tr></table>

我想在<td>的整个单元格中显示该图像。标题部分应显示在整个空间中的图像之后。请建议我需要添加哪些代码才能使其正常工作。目前我无法在<td>的边框内正确设置图像。或者有任何好的方法来实现这一目标。的jsfiddle：http://jsfiddle.net/4S6gR/103/ 我想用html / css实现这个目的。

Answer 1

我想在td的整个单元格中显示该图像。

忘记img标签，有一种更简单的方法。

<td style="background-image:url('asd.jpg');">

Answer 2

在看着你的小提琴后，我想你的意思是你希望图像覆盖除了标题以外的单元格中的其他区域。

如果是这样的话：

选中此chrome

添加了一个新div以覆盖div，为标题18px添加了高度，如浏览器呈现的那样，然后将182px的高度赋予包含图像的div。

Answer 3

您应该使用th而不是使用td在div内格式化以创建标题，您还需要从标题中删除高度宽度

.mytable{
  width:100%;
  height:100%;
}
.mytable header{
  background: gray;
  text-align: center;
}

.mytable img, header{
  width:200px;
}

.mytable td img{
  display:block; 
}

<table class="mytable">
  <tr>
    <th>
      <section>
        <header>Header1</header>
      </section>
    </th>
    <th>
      <section>
        <header>Header2</header>
      </section>
    </th>
  </tr>
  <tr>
    <td>
      <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
    </td>
    <td>
      <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
    </td>
  </tr>
</table>

将图像放在整个单元格中

3 个答案: