表格单元格填充和边框颜色问题

Question

在创建表格和表格内的边框颜色时，我在单元格填充方面遇到了一些问题。 不确定是否有其他一些与表格相关的 CSS 覆盖了 cellpadding，我正在尝试提供一个新表格。

关于如何在表格中获得正确的单元格填充和边框颜色有什么建议吗？

这是我尝试复制的表的屏幕截图：

这是我创建的表格的屏幕截图。

这是 CSS 和表格 HTML：

table, td, th {
  border: 1px solid black;
  height: 30px !important;
  display: table-cell;
  vertical-align: middle;
}

table {
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    width: 70%;
}


tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

tr td {
    border-color: #e0dede !important;
}

<table border="2" width="100%" cellPadding="5">
  <tbody>
    <tr bgcolor="#1f4e79">
      <td>&nbsp;</td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring &lt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer &gt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall &lt;80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
    </tbody>
    <tbody>
      <tr>
        <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and         lay it at the base of the tree for approximately 20 to 30 minutes.&nbsp; Repeat this step on the other side of the tree</td>
      </tr>
  </tbody>
</table>

Answer 1

您的代码几乎已经可以运行了。您只需将

border-collapse: collapse;

添加到

table

规则即可避免双边框，并将

padding

添加到

td

规则中：

table,
td,
th {
  border: 1px solid black;
  height: 30px !important;
  display: table-cell;
  vertical-align: middle;
}

table {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  width: 70%;
  border-collapse: collapse;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

tr td {
  border-color: #e0dede !important;
  padding: 4px 10px;
}

<table border="2" width="100%" cellPadding="5">
  <tbody>
    <tr bgcolor="#1f4e79">
      <td>&nbsp;</td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring &lt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer &gt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall &lt;80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and lay it at the base of the tree for approximately 20 to 30 minutes.&nbsp; Repeat this step on the other side of the tree</td>
    </tr>
  </tbody>
</table>

顺便说一句，我宁愿对

table

th

和

td

使用单独的规则，您可以在其中定义不同的边框样式。另外，你的 forst css 规则实际上会将

display: table-cell

应用于

table

...

Answer 2

我建议您不要在

td

上设置所有边框，而不是在

table

上设置所有边框，因为这会在表格和单元格边框之间创建额外的空间。

所以你应该设置下面的CSS来删除单元格之间的空间：

table{
  border-collapse: collapse;
  border-spacing: 0;
  border:0;
}

这个 CSS 可以使外部兄弟更大：

tbody > tr > td:first-child{
  border-left:2px solid black !important;
}
tbody:first-child > tr:first-child > td {
  border-top:2px solid black !important;
}
tbody > tr > td:last-child{
  border-right:2px solid black !important;
}
tbody:last-child > tr:last-child > td {
  border-bottom:2px solid black !important;
}

演示

table, td, th {
  border: 1px solid black;
  height: 30px !important;
  display: table-cell;
  vertical-align: middle;
}

table {
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    width: 70%;
}


tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

tr td {
    border-color: #e0dede !important;
}

/*ADDED*/
table{
  border-collapse: collapse;
  border-spacing: 0;
  border:0;
}

tbody > tr > td:first-child{
  border-left:2px solid black !important;
}
tbody:first-child > tr:first-child > td {
  border-top:2px solid black !important;
}
tbody > tr > td:last-child{
  border-right:2px solid black !important;
}
tbody:last-child > tr:last-child > td {
  border-bottom:2px solid black !important;
}

<table border="2" width="100%" cellPadding="5">
  <tbody>
    <tr bgcolor="#1f4e79">
      <td>&nbsp;</td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring &lt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer &gt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall &lt;80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
    </tbody>
    <tbody>
      <tr>
        <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and         lay it at the base of the tree for approximately 20 to 30 minutes.&nbsp; Repeat this step on the other side of the tree</td>
      </tr>
  </tbody>
</table>

Answer 3

您几乎就在那里 - 我在下面所做的就是从表格标记中删除属性，向表格添加边框折叠并向 td 和 th 添加填充（加上删除所有不需要的额外内容）

td,
th {
  border: 1px solid black;
  height: 30px;
  vertical-align: middle;
  padding: 5px;
}

table {
  border: 2px solid black;
  border-collapse: collapse;
  width: 70%;
}

tr td {
  border-color: #e0dede;
}

<table>
  <tbody>
    <tr bgcolor="#1f4e79">
      <td>&nbsp;</td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring &lt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer &gt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall &lt;80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and lay it at the base of the tree for approximately 20 to 30 minutes.&nbsp; Repeat this step on the other side of the tree</td>
    </tr>
  </tbody>
</table>

Answer 4

td,
th {
  border: 1px solid black;
  height: 30px;
  vertical-align: middle;
  padding: 5px;
}

table {
  border: 2px solid black;
  border-collapse: collapse;
  width: 70%;
}

tr td {
  border-color: #e0dede;
}

<table>
  <tbody>
    <tr bgcolor="#1f4e79">
      <td>&nbsp;</td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring &lt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer &gt;80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall &lt;80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and lay it at the base of the tree for approximately 20 to 30 minutes.&nbsp; Repeat this step on the other side of the tree</td>
    </tr>
  </tbody>
</table>