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

th, td {

  border: 1px solid black;
  border-collapse: collapse;

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

td.empty{ border: 0;}

    <table cellspacing="0"> 
        <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 class="empty"></td> 
            <td>85</td> 
            <td>78</td> 
            <td>82</td> 
            <td>77</td> 
            <td>81</td> 
        </tr> 
    </table>

Answer 2

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

  

一个表行有5列宽，小于第一行建立的列数（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>