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

Question

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

关于如何在 table 中获得正确的单元格填充和边框颜色的任何建议？

这是我正在尝试复制的 table 的屏幕截图：

这是我创建的 table 的屏幕截图。

这里是 CSS 和 table 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 使用单独的规则，您可以在其中定义不同的边框样式。此外，您的第一个 css 规则实际上会将 display: table-cell 应用于 table...

Answer 2

我建议您不要在 td 上设置所有边框，而不要在 table 上设置所有边框，因为它会在 table 和单元格边框之间创建一个额外的 space .

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

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

你几乎就在那里 - 我在下面所做的就是从你的 table 标签中删除属性，向 table 添加边框折叠并向 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>

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

Table Cellpadding and Border Color Issue

html

css

html-table

演示