使用原生table 书写复杂人事档案表格

最新推荐文章于 2024-06-26 15:41:00 发布

原创最新推荐文章于 2024-06-26 15:41:00 发布 · 447 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

js 同时被 3 个专栏收录

27 篇文章

订阅专栏

vue

26 篇文章

订阅专栏

html

26 篇文章

订阅专栏

这是一份关于许七安的人事档案，他在大奉衙门的打更四组任职打更人。档案中包含了许七安的个人信息，如姓名、性别、民族、政治面貌、婚姻状况、学历、专业、毕业院校等。此外，还记录了许七安的家庭成员信息、应急联系人及其联系方式。档案显示他的入职时间为2022年12月30日。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div style="margin: 0 auto">
    <table>
      <tr>
        <td colspan="24" style="font-size: 24px;font-weight: bold">
          人事档案
        </td>
      </tr>
      <tr>
        <td colspan="3" class="title">部门</td>
        <td colspan="5">大奉衙门</td>
        <td colspan="3" class="title">所属岗位</td>
        <td colspan="5">打更人</td>
        <td colspan="3" class="title">所属组别</td>
        <td colspan="5">打更四组</td>
      </tr>

      <tr>
        <td colspan="3" class="title">姓 名</td>
        <td colspan="5">许七安</td>
        <td colspan="3" class="title">性 别</td>
        <td colspan="5">男</td>
        <td colspan="3" class="title">民 族</td>
        <td colspan="5">汉族</td>
      </tr>

      <tr>
        <td colspan="3" class="title">政治面貌</td>
        <td colspan="5">党员</td>
        <td colspan="3" class="title">婚姻状况</td>
        <td colspan="5">重婚</td>
        <td colspan="3" class="title">出生年月</td>
        <td colspan="5">未知</td>
      </tr>

      <tr>
        <td colspan="3" class="title">学历</td>
        <td colspan="5">小学本科</td>
        <td colspan="3" class="title">专 业</td>
        <td colspan="5">医药学</td>
        <td colspan="3" class="title">毕业院校</td>
        <td colspan="5">金陵十三小</td>
      </tr>

      <tr>
        <td colspan="3" class="title">职业资格</td>
        <td colspan="5"></td>
        <td colspan="3" class="title">专业职称</td>
        <td colspan="5">卫生清洁</td>
        <td colspan="3" class="title">期望薪资</td>
        <td colspan="5">富可敌国</td>
      </tr>

      <tr>
        <td colspan="8" class="title">身份证号码</td>
        <td colspan="16">202203031043</td>
      </tr>

      <tr>
        <td colspan="8" class="title">户口所在地详细地址</td>
        <td colspan="16">后院怡红院左侧小柴房</td>
      </tr>

      <tr>
        <td colspan="8" class="title">入 职 时 间</td>
        <td colspan="8">2022-12-30</td>
        <td colspan="4" class="title">身份证号码</td>
        <td colspan="4">202203031043</td>
      </tr>

      <tr>
        <td colspan="4" rowspan="2" class="title">通讯方式</td>
        <td colspan="4" class="title">手机</td>
        <td colspan="8">1145</td>
        <td colspan="4" class="title">邮箱</td>
        <td colspan="4">1398484490@qq.com</td>
      </tr>

      <tr>
        <td colspan="4" class="title">现住地址</td>
        <td colspan="16">小桃红怡红院秀春居</td>
      </tr>

      <tr>
        <td colspan="4" class="title" rowspan="4">家庭成员</td>
        <td colspan="4" class="title">称谓</td>
        <td colspan="4" class="title">姓名</td>
        <td colspan="4" class="title">关系</td>
        <td colspan="4" class="title">现居住地</td>
        <td colspan="4" class="title">工作单位</td>
      </tr>

      <tr>
        <td colspan="4" class="title">父亲</td>
        <td colspan="4">XXX</td>
        <td colspan="4">父子</td>
        <td colspan="4">XXXXXXXXXX</td>
        <td colspan="4">XXXXXXXXXX</td>
      </tr>

      <tr>
        <td colspan="4" class="title">母亲</td>
        <td colspan="4">XXX</td>
        <td colspan="4">母子</td>
        <td colspan="4">XXXXXXXXXX</td>
        <td colspan="4">XXXXXXXXXX</td>
      </tr>

      <tr>
        <td colspan="4" class="title">Brother</td>
        <td colspan="4">XXX</td>
        <td colspan="4">兄弟</td>
        <td colspan="4">XXXXXXXXXX</td>
        <td colspan="4">XXXXXXXXXX</td>
      </tr>

      <tr>
        <td colspan="8" class="title">应急联系人</td>
        <td colspan="8">魏老大</td>
        <td colspan="4" class="title">联系电话</td>
        <td colspan="4">现找</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "html-table"
};
</script>

<style scoped>
table {
  font-family: 宋体, "serif";
  border-collapse: collapse;
  border-spacing: 0;
  width: 1000px;
  table-layout: fixed;
  margin: 0 auto;
}

table th,
table td {
  border: 1px solid #999999;
}

table tr {
  height: 60px;
}

table .title {
  font-weight: bold;
}
</style>

预览图