分享html表格简历表

话不多说，先上图
（1）表格代码

<div v-if="printPage" ref="print" class="print-border">
      <div style="margin:0 auto;">
        <div
          style="text-align:center;margin-top:30px;font-size:24;font-weight:bold"
        >
          简介表
        </div>
        <table
          class="table table-striped table-bordered"
          align="center"
          valign="center"
        >
          <tr>
            <td class="column" colspan="7">基本信息</td>
          </tr>
          <tr>
            <td class="column" colspan="1">姓 名</td>
            <td class="value" colspan="1" />
            <td class="column" colspan="1">性 别</td>
            <td class="value" colspan="1" />
            <td class="column" colspan="1">民 族</td>
            <td class="value" colspan="1">汉 族</td>
            <td colspan="1" class="value" width="20%" rowspan="4">
              照 片
            </td>
          </tr>
          <tr>
            <td class="column">出生日期</td>
            <td class="value" />
            <td class="column">年 龄</td>
            <td class="value" />
            <td class="column">籍 贯</td>
            <td class="value" />
          </tr>
          <tr>
            <td class="column">婚姻状况</td>
            <td class="value" />
            <td class="column">最高学历</td>
            <td class="value" />
            <td class="column">专 业</td>
            <td class="value" />
          </tr>
          <tr>
            <td class="column">政治面貌</td>
            <td class="value" />
            <td class="column">入党(团)时间</td>
            <td class="value" />
            <td class="column">参加工作时间</td>
            <td class="value" />
          </tr>
          <tr>
            <td class="column">部 门</td>
            <td class="value" />
            <td class="column">岗位类别</td>
            <td class="value" />
            <td class="column">现工作岗位</td>
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="column">所属业务队</td>
            <td class="value" />
            <td class="column">合同类型</td>
            <td class="value" />
            <td class="column">用工方式</td>
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="column">现单位入职时间</td>
            <td class="value" />
            <td class="column">现单位工作年限</td>
            <td class="value" />
            <td class="column">合同签订时间</td>
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="column">身份证号</td>
            <td class="value" colspan="2" />
            <td class="column">所在专业</td>
            <td class="value" colspan="3" />
          </tr>
          <tr>
            <td class="column">联系电话</td>
            <td class="value" colspan="2" />
            <td class="column" colspan="2">人员状态</td>
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="column" colspan="7">学习经历</td>
          </tr>
          <tr>
            <td class="value">毕业院校</td>
            <td class="value">所学专业</td>
            <td class="value">学历</td>
            <td class="value">入学日期</td>
            <td class="value">毕业日期</td>
            <td class="value" colspan="2">学习形式</td>
          </tr>
          <tr>
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="column" colspan="7">工作经历</td>
          </tr>
          <tr>
            <td class="value" colspan="2">所在单位</td>
            <td class="value">担任职务</td>
            <td class="value">单位类型</td>
            <td class="value">入职日期</td>
            <td class="value" colspan="2">离职日期</td>
          </tr>
          <tr>
            <td class="value" colspan="2" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="value" colspan="2" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="value" colspan="2" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="value" colspan="2" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>
          <tr>
            <td class="value" colspan="2" />
            <td class="value" />
            <td class="value" />
            <td class="value" />
            <td class="value" colspan="2" />
          </tr>

          <tr>
            <td class="column">爱好</td>
            <td class="value" colspan="6" />
          </tr>
          <tr>
            <td class="column">技能</td>
            <td class="value" colspan="6" style="text-align:left;">
              <br />
              <br />
              <br />
              <br />
            </td>
          </tr>
          <tr>
            <td class="column">自我评价</td>
            <td class="value" colspan="6">
              <br />
              <br />
              <br />
              <br />
            </td>
          </tr>
        </table>
      </div>
    </div>```
css样式代码：`.table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  width: 800px;
  margin: 0 auto;
}

.table td {
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  font-family: 'Arial Normal', 'Arial';
  color: #333333;
  padding: 6px 6px;
}

.table-bordered {
  border: 1px solid #ddd;
}

* {
  margin: 0px;
  padding: 0px;
}

.column {
  border: 1px solid #333;
  background: #f1f1f1;
}
.column,.value{
  width: 30px;
  height: 30px;
}
.value {
  border: 1px solid #333;
}


.photo{
  width: 30px;
  height: 30px;
  border: 1px solid red;
}

/**解决print.js打印空白页问题*/
.print-border{
  border:1px solid white
}`