为什么我的背景颜色没有填满我的所有表格？答案

【问题标题】：Why is my background color not filling all of my table?为什么我的背景颜色没有填满我的所有表格？
【发布时间】：2016-01-21 18:48:54
【问题描述】：

我的表格行中的图片有问题。由于某种原因，当我将图片浮动到左侧时，背景颜色不会扩展并填充表格行。

p.more {
  color: rgb(255, 255, 255);
  font-family: Arial;
  font-size: 18px;
  line-height: 140%;
  margin: 0px;
  text-align: center;
  background-color: #cccccc;
}
img.more {
  float: left !important;
  margin: 0px 15px 15px 0px;
  width: 330px;
}
span.more {
  line-height: 100%;
  text-align: center;
  font-size: 18px;
}
span.moreweelove {
  color: rgb(255, 255, 255);
}

<table>
  <tr>
    <td>
      <p class="more">
        <a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/">
          <img class="more" src="http://www.weespring.com/media/weelove_littlehipsqueeks.jpg">
        </a>
        <br>
        <span class="more"><span class="moreweelove"><strong>Modern, Comfy, and Fun Staples</strong></span></span>
      </p>
      <p class="readmore">
        <strong class="subheading">BIG LOVE FOR JUNE &amp; JANUARY</strong>
        <br>
        <br>
        <a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/">
          <img src="http://www.weespring.com/media/read-more.png">
        </a>
        <br>
        <br>

      </p>
    </td>
  </tr>
</table>

【问题讨论】：

您将颜色应用于单元格的内容，因此只有<p> 所在的位置才会有bg 颜色。您应该改为将颜色应用于包含 <td>。
非常感谢大家。我对表格和编码很陌生，所以我很感激帮助！

标签： html css tablerow

【解决方案1】：

如果想用背景颜色填充整行，则应将 css 样式应用于相应的 < tr > 标签。

【讨论】：

嗯，差不多。如果表格包含多于一行，那么您会看到行之间的间隙。见fiddle。

【解决方案2】：

由于您应用了<p> 的背景颜色，因此只有<p> 本身会被着色。如果最后一行没有占据容器的整个宽度，例如

     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxx

那么只有带有x 的部分才会得到背景处理。但是，如果将颜色应用于包含在段落周围的 <td>，如下所示：

    +------------------------+
    |xxxxxxxxxxxxxxxxxxxxxxxx|
    |xxxxxxxxxxxxxxxxxxxxxxxx|
    |xxxxxxxxxxxxx           |
    +------------------------+

那么最后的部分行也将被着色，因为<td> 的整个框都是着色的，而不仅仅是文本所在的位置。

【讨论】：

【解决方案3】：

这是因为你给“p.more”而不是桌子赋予了风格。尝试为表格赋予背景颜色。

【讨论】：