HTML 表格偏移一列

Question

如何偏移表格行中的一列？我使用过 colspan，但它需要两列宽度，但我想喜欢这张图片。

这是我的代码:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px 15px;
    text-align: left;    
}

<table> 
    <tr> 
        <th colspan="2">65</th> <th colspan="2">40</th> 
        <th colspan="2">20</th> 
    </tr> 
    <tr> 
        <th>Men</th> 
        <th>Women</th> 
        <th>Men</th> 
        <th>Women</th> 
        <th>Men</th> 
        <th>Women</th> 
    </tr> 
    <tr> 
         <td>85</td> 
         <td>78</td> 
         <td>82</td> 
         <td>77</td> 
         <td>81</td> 
    </tr> 
</table>

Answer 1

您的 HTML 标记因缺少 <td> 而无效第三行的元素。您在 HTML 检查器上收到以下警告:

A table row was 5 columns wide, which is less than the column count established by the first row (6).

所以你必须设置一个(空)单元格，但是你可以用CSS隐藏这个单元格。要隐藏空单元格，您可以使用 :empty 和 :blank (目前是草稿)伪类。无需为空单元格设置类。

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px 15px;
  text-align: left;    
}
td:empty {
  visibility:hidden;
}
td:blank {
  visibility:hidden;
}

<table> 
  <tr> 
    <th colspan="2">65</th>
    <th colspan="2">40</th> 
    <th colspan="2">20</th> 
  </tr> 
  <tr> 
    <th>Men</th> 
    <th>Women</th> 
    <th>Men</th> 
    <th>Women</th> 
    <th>Men</th> 
    <th>Women</th> 
  </tr> 
  <tr>
    <td></td>
    <td>85</td> 
    <td>78</td> 
    <td>82</td> 
    <td>77</td> 
    <td>81</td> 
  </tr> 
</table>