How to properly format tables using css

Question

I want the outer borders of my table be dashed, while the inner borders be solid. So I made these css codes for my normal-table, but whole table border is solid.

.zulu-post .zulu-content .normal-table{
    color: #444444;
    border: 1px dashed #444444;
}

.zulu-post .zulu-content .normal-table td, .normal-table tr{
    padding: 10px;
    border: 1px solid #444444;
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
    <tbody>
        <tr>
            <td>Table Name</td>
        </tr>
        <tr>
            <td>Make sure that Stylesheet Classes is normal-table</td>
        </tr>
        <tr>
            <td>Text Here...</td>
        </tr>
    </tbody>
</table>

Answer 1

This is one way of doing what you want:

Basically you add border left and top to all <td> tags and than remove the border from the sides of the table, and you use dashed border on <table>.

.normal-table {
  color: #444444;
  border: 1px dashed #444444;
}

.normal-table td {
  padding: 10px;
  border-left: 1px solid #444444;
  border-top: 1px solid #444444;
}

.normal-table td:first-child {
  border-left: none;
}

.normal-table tr:first-child td {
  border-top: none;
}

<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;">
    <tbody>
        <tr>
            <td>Table Name</td>
        </tr>
        <tr>
            <td>Make sure that Stylesheet Classes is normal-table</td>
        </tr>
        <tr>
            <td>Text Here...</td>
        </tr>
    </tbody>
</table>

Answer 2

1st make use of border-collpase:collapse, this collapse the table border to single border then do styling part for table, tbody, tr and such.

.normal-table {
  border: 2px solid red;
  border-collapse: collapse;
}

tr {
  border: 2px dashed red;
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
  <tbody>
    <tr>
      <td>Table Name</td>
    </tr>
    <tr>
      <td>Make sure that Stylesheet Classes is normal-table</td>
    </tr>
    <tr>
      <td>Text Here...</td>
    </tr>
  </tbody>
</table>