SOURCE

<table>
  <caption>性别表格</caption>
  <thead>
    <tr>
      <th>性别</th>
      <th>性别</th>
      <th>性别</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">（注：表格分享）</td>
    </tr>
  </tfoot>
  <colgroup>
    <col span="2" width="100">
    <col span="1" class="last-col">
  </colgroup>  
  <tbody>
    <tr>
      <td>男</td>
      <td>男</td>
      <td>男</td>
    </tr>
    <tr>
      <td>男</td>
      <td>男</td>
      <td>男</td>      
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>女</td>
      <td>女</td>
      <td>女</td>      
    </tr>
  </tbody>
</table>

<div class="table">
  <div class="caption">性别表格</div>
  <div class="thead">
    <div class="tr">
      <div class="td">性别</div>
      <div class="td">性别</div>
      <div class="td">性别</div>
    </div>
  </div>
  <div class="colgroup">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">男</div>
      <div class="td">男</div>
      <div class="td">男</div>
    </div>
    <div class="tr">
      <div class="td">男</div>
      <div class="td">男</div>
      <div class="td">男</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">女</div>
      <div class="td">女</div>
      <div class="td">女</div>
    </div>
  </div>
</div>
<div class="table table-tfoot">
  <div class="tfoot">
    <div class="tr">
      <div class="td">（注：表格分享）</div>
    </div>  
  </div>
</div>

th,td {
  border: 1px solid #ccc;
  font-size: 18px;
  text-align: left;
}
tfoot td {
  font-size: 12px;
  text-align: center;
}
.last-col {
  background: pink;
}

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
}
.table * {
  vertical-align: middle;
}
.caption {
  display: table-caption;
  text-align: center;
}
.thead {
  display: table-header-group;
  font-weight: bold;
}
.tfoot {
  display: table-footer-group;
}
.tfoot .td {
  font-size: 12px;
}
.tbody {
  display: table-row-group;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  border: 1px solid #ccc;
  font-size: 18px;
  text-align: left;
}
.colgroup {
  display: table-column-group;
}
.col {
  display: table-column;
  width: 100px;
}
.col:last-child {
  width: auto;
  background: pink;
}
.table-tfoot {
  margin-top: -2px;
  width: 247px;  
}
.table-tfoot .td {
  text-align: center;
}