Table Cellpadding and Border Color Issue

I am having some trouble with cellpadding when creating a table and border color within the table. Not sure if there is some other table related CSS that is overriding the cellpadding I am trying to give a new table.

Any suggestion on how I can get the correct cellpadding and border color within the table?

This is a screenshot of the table I am trying to replicate:

Here is a screenshot of the table I have created.

Here is the CSS and 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>

Solution

Your code almost works already. You just have to add border-collapse: collapse; to the table rule to avoid double borders, and add padding to the td rule:

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>

BTW, I would rather use separate rules for table th and td, where you can define different border styles. Also, your forst css rule would actually apply display: table-cell to the table...