html - 如何在表列之间插入空格？

Question

如何在表格列之间添加空格或边距？我只想在我的表中的第一列之后添加空格。

这是我到目前为止尝试过的方法，但它不起作用。有人有什么想法吗？

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

为了达到预期的结果，添加带有标题的附加列 - th

1. 删除边框= 1
2. 添加th和对应的td为空
3. 第二列使用白色背景
4. 根据第二列的间距使用大约 1-5 像素的最小宽度

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