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

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 元素和一些 CSS flex

来代替 Table

/*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>