How to insert space in between table columns?

Question

How do I add space or margin in between table columns? I want to add space after the first column only in my table.

Here is what I have tried so far but its not working. Anyone have any ideas?

table {
    margin: 0 auto;
    display: block;
    width: 600px;
    border-collapse: separate;

    tr {

        td {
            min-width: 150px;
            padding: 10px;
            text-align: center;

            &:first-child{
                font-size: 15px;
                color: #000;
                margin-right: 50px;
                border-spacing: 50px 0;
                background: #fff;
            }
        }
    }
}

<table className='table-body' border='1'>
    <tbody>
        <tr>
            <th></th>
            <th>Gatlin Plumbing &#38; Heatings</th>
            <th>St. John Plumbing, Inc.</th>
            <th>Budget Right Handyman</th>
            <th>Plumbing Company</th>
        </tr>
        <tr>
            <td>Grade</td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>Review Count</td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

Answer 1

To achieve expected result, add additional column with header - th

1. Remove border= 1
2. Add th and corresponding td with empty
3. Use background white for second column
4. Use min-width of around 1-5 px based on your spacing for second column

table {
  margin: 0 auto;
  display: block;
}
table tr td, table tr th {
  min-width: 150px;
  padding: 10px;
  text-align: center;
  border: 1px solid black
}
table tr td:nth-child(2),  table tr th:nth-child(2){
border: 1px solid white;
min-width: 1px;
}

<table className='table-body'>
    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th>Gatlin Plumbing &#38; Heatings</th>
            <th>St. John Plumbing, Inc.</th>
            <th>Budget Right Handyman</th>
            <th>Plumbing Company</th>
        </tr>
        <tr>
            <td>Grade</td>
            <td></td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>Review Count</td>
          <td></td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

codepen - https://codepen.io/nagasai/pen/YgParK

Answer 2

Instead of Table, you could use DIV elements and just a bit of CSS flex

/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}



/**
 * Companies
 * Represent companies data in a tabular fashion
 */
 
.Companies-row {
  display: flex;
}
.Companies-row > * {
  flex: 1;
  border: 1px solid #000;
}
.Companies-row > *:nth-child(1){
  margin-right: 30px;
}

<div class='Companies'>
  <div class='Companies-row'>
    <div></div>
    <div>Gatlin Plumbing &#38; Heatings</div>
    <div>St. John Plumbing, Inc.</div>
    <div>Budget Right Handyman</div>
    <div>Plumbing Company</div>
  </div>
  <div class='Companies-row'>
    <div>Grade</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class='Companies-row'>
    <div>Review Count <br>&amp; Test newline</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
</div>