Question

我正在布置一个带有桌子的网站，徽标位于桌子的顶行。徽标是一个带有绿色背景的大部分透明图像，它位于红色背景的桌子中。但是，表格单元格不会缩小以垂直适合图像，因此当我不想要它时，它会在图像下方显示一些背景红色。我尝试将margin和padding全部设置为0，将cell-spacing和cell-padding设置为0，并删除边框，但没有一个有效。

我的浏览器页面检查工具显示td元素负责扩展单元格的高度，而不是tr或table

我错过了什么？我觉得这很简单。

HTML：

<!DOCTYPE html>
 <html>
 <head>
  <link rel="stylesheet" href="styles2.css" />
 </head>
 <body>
  <div id="wrapper">
    <table id="layoutTable" >
      <tr>
        <td class="layoutTabletd">
          <img id="logoImage" src="res/logobar2.png"/>
        </td>
      </tr>
    </table>
  </div>
 </body>
 </html>

CSS：

#wrapper
{
  width:              1000px;
  margin-left:        auto;
  margin-right:       auto;
}
#layoutTable
{
  background-color:   #FF0000;
  margin:             0px;
  padding:            0px;
  border-collapse:    collapse;
}
#layoutTable tr td.layoutTabletd
{
  border:             1px solid black;
  padding:            0px;
  margin:             0px;
}
#logoImage
{
  background-color:   #00FF00;
  margin-left:        auto;
  margin-right:       auto;
  margin-top:         0px;
  margin-bottom:      0px;
  padding:            0px;
}

结果：

Answer 1

解决：http://jsfiddle.net/r0801v5v/

#layoutTable
{
  line-height:0;
  background-color:   #FF0000;
  margin:             0px;
  padding:            0px;
  border-collapse:    collapse;
}

注意添加的行高：0; - 我不确定为什么会这样，但我以前见过它。希望我帮忙。

HTML缩小td以适合图像大小

1 个答案: