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

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;
}

小提琴

更新

问：“好的，但是.如果我这样做，不仅仅是这个表，而是我HTML中的所有表格都会有黑色的背景。如何才能做到这一个呢？”

在这种情况下，您希望向表中添加一个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;
}

小提琴