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

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

Answer 2

您可以使用DIV元素代替Table，而只需使用 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>