Question

我想使用CSS为HTML指定背景颜色。如果我的foobar.css文件是

back {
  background-color: #808080;
}

我的index.html是

<link href="foobar.css">

<p><back>foo</back></p>
<p><back>foobar</back></p>

然后这不能完美地工作：是的线条有背景，但背景只覆盖线条长度，因此它在右侧是锯齿状的，背景不会覆盖线条之间的空间。

怎么做才能让背景覆盖段落周围的整个矩形？

我尝试foobar.css喜欢

table {
  background-color: #808080;
}

然后在index.html中引用

<table>
<p>foo</p>
<p>foobar</p>
</table>

但这完全被忽略了。

Answer 1

希望这能解决你的问题

    <table>
        <tr>
            <td>
               <p>foo</p>
               <p>foobar</p>
            </td>
       </tr>
    </table>
  <style>
      table{background-color:red;}
  </style>

Answer 2

这种情况正在发生，因为你写的<table>里面有错误的标签。 <table>标记应由N <tr>（行）组成，<tr>可包含N <td>（单元格）。

这是您应该使用的代码。

<table>
  <tr>
   <td>foo</td>
  </tr>
  <tr> 
   <td>foobar</td>
  </tr>
</table>

以下是<table>元素及其可能内容的完整说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Answer 3

只要你在表格中使用正确的元素，我看起来就很好。

HTML

<table>
    <tr>
        <td>foo</td>
        <td>bar</td>
    </tr>
</table>

CSS

table {
  background-color: #808080;
}

Fiddle

<强>更新

来自原始海报的问题：＆＃34;好的但是......如果我这样做，不仅仅是这个表，但我的HTML中的所有表都有黑色背景。怎么做只有这个呢？＆＃34;

在这种情况下，您希望向表中添加ID，然后创建与该ID匹配的CSS规则。

HTML

<table id="my-table">
    <tr>
        <td>foo</td>
        <td>bar</td>
    </tr>
</table>

<table>
    <tr>
        <td>foo</td>
        <td>bar</td>
    </tr>
</table>

CSS

#my-table {
  background-color: #808080;
}

Fiddle

Answer 4

当你使用像<back>这样的未定义标签时，浏览器会将其视为打开一个未定义的元素，默认情况下它具有内联呈现（CSS中为display: inline）。这意味着在其上设置的任何背景将仅覆盖文本的宽度。此外，这些元素位于p元素内，p元素默认具有顶部和底部边距，内部元素的背景不会延伸到该边距区域。

要为占用可用宽度的矩形指定背景，请使用div元素作为包装：

＆＃13;

.foo { background-color: #808080; }

＆＃13;

<div class="foo">
<p><back>foo</back></p>
<p><back>foobar</back></p>
</div>

＆＃13;

此处无需表格。只有当我们生活在20世纪90年代中期时才需要一个表，当时在块上设置背景颜色的唯一方法是使用单个单元格表和bgcolor属性。

如何在CSS中指定背景文本矩形颜色

4 个答案: