Question

我有这段代码：

＆＃13;

body {
  background-color: #2c3e50;
}

#td_design {
  background-color: #f39c12;
  color: #FFFFFF;
}

＆＃13;

<table>
  <tr>
    <td id="td_design">
      asdasd<br/> asdsajsakj
      <br/> asdqjwhdksad
      <br/>
    </td>
  </tr>
</table>

＆＃13;

我尝试在身体上涂上一种颜色来测试TD的颜色是否实际扩展。这是结果：

我知道可以通过在id = "td_design"上添加<table>而不是<td>来修复此问题，但我无法解决，因为我想为每个{background-color添加td {1}}。如何将TD的颜色扩展到整个页面？

Answer 1

确保在css中将所有间距和填充设置为0px

Answer 2

默认情况下，表格在单元格之间有一些间距。

您可以使用以下方法之一删除此间距：

border-collapse: collapse;
/* OR */
border-spacing: 0;

如果您的桌子没有边框，那么您可以使用您想要的任何一个。如果您确实开始添加边框，那么collapse将开始将边框合并在一起（这可能会产生有趣的效果......）而border-spacing只会将它们并排放置而没有间隙。

以下是一些演示：

＆＃13;

table {
  margin-bottom: 16px;
  background-color: black;
}
td {
  background-color: #cfc;
}

#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}

#tbl_4 td {border: 1px solid #3cf}

#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}

#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}

#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}

td.red {
  border-color: #f66 !important;
  background-color: #fcc !important;
}
td.red.fix {
  border-style: double !important;
}

＆＃13;

Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>

Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>

Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>

Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>

Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>

Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>

Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>

＆＃13;

Answer 3

试用此代码：
我根据要求添加了不同的类（每个TD的颜色不同）。添加了3个类td_design1, td_design2 and td_design3，每个类都有不同的颜色。

因此，这将为不同的表TD调用不同的类样式。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
 background-color: #2c3e50;
}

#td_design1 {
  background-color: #f39c12;
  color: #FFFFFF;
}
#td_design2 {
  background-color: #559542;
  color: #FFFFFF;
}
#td_design3 {
  background-color: #f00112;
  color: #FFFFFF;
}


</style>

<table>
  <tr>
    <td id = "td_design1">
       asdasd
    </td>
    <td id = "td_design2">
       asdsajsakj
    </td>
    <td id = "td_design3">
       asdqjwhdksad
    </td>
  </tr>
</table>
</body>
</html>

Answer 4

从tr / td中删除边框，这似乎是border: 3px inset gray或接近...

body {
  background-color: lightgray;
}

#td_design {
  background-color: #f39c12;
  color: #FFFFFF;
}

.withBorder {
  border: 3px inset gray;
}
.withoutBorder{
  border: none;
}

<table>
  <tr>
    <td id="td_design">
      <h5>default navigator style</h5>
      asdasd<br/> asdsajsakj
      <br/> asdqjwhdksad
      <br/>
    </td>
  </tr>

  <tr>
    <td id="td_design" class=withBorder>
      <h5>with border styled</h5>
      asdasd<br/> asdsajsakj
      <br/> asdqjwhdksad
      <br/>
    </td>
  </tr>

  <tr>
    <td id="td_design" class=withoutBorder>
      <h5>with border none (like many browsers default)</h5>
      asdasd<br/> asdsajsakj
      <br/> asdqjwhdksad
      <br/>
    </td>
  </tr>
</table>

填充背景颜色整个TD

4 个答案: