在两个表列之间添加间隙

Question

我正在尝试创建一个HTML表，该表在一对列之间留有间隙。我能想到的唯一解决方案是创建两个表，并在它们之间留有一定的余量，但这对我想要实现的目标来说似乎不必要地复杂。

更具体地说，我正在尝试在CSS中创建一个日历显示，在周末和工作日之间留出装饰间隙，请参见下图：

编辑：这是一些指示性标记

<table>
    <thead>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th class="add-left-gap">Saturday</th>
        <th>Sunday</th>
    </thead>
    <tbody>
        <tr>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>1</td>
            <td class="add-left-gap">2</td>
            <td>3</td>
        </tr>
        <!-- and so on... -->
    </tbody>
</table>

还有一些CSS：

.add-left-gap {
    /* this doesn't work because table cells don't respect margins, 
       but it shows what I'm trying to accomplish */
    margin-left: 20px;
}

Answer 1

您可以插入空的<th>和<td>标签并删除其边框。

table th,
table td {
  border: 1px solid black;
}
.gap {
   border: none;
}

<table>
  <thead>
     <th>Monday</th>
     <th>Tuesday</th>
     <th class="gap"></th>
     <th>Wednesday</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td class="gap"></td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer 2

在表CSS中添加一行：

table{
    border-spacing: 10px 0px;
}

使用border-spacing属性，您只需将顶部和底部边框空间设为0，然后应用左右空间即可。