1、运行示例：
2、代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工个人信息详情页</title>
<!-- Bootstrap核心css文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
img{
width: 120px;
height: 150px;
}
.showparent{
position: relative;
}
.showchild{
position: relative;
top:40%;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<h3 class="m-3 text-center">员工个人信息登记表</h3>
<div class="row py-1 bg-light text-center no-gutters">
<div class="col-3"><span class="d-inline-block w-100 h-100 border">公司名称:</span></div>
<div class="col-9"><input class="w-100" type="text" placeholder="请填写公司名称"></div>
</div>
<div class="row clearfix bg-light text-center no-gutters">
<div class="col-3 float-left">
<img src="img/1.png" alt="美女">
</div>
<div class="col-9 fload-right">
<div class="row py-2 bg-light text-center no-gutters">
<div class="col-2"><span class="d-inline-block w-100 h-100 border">姓名:</span></div>
<div class="col-3"><input type="text" class="w-100" placeholder="姓名"></div>
<div class="col-3"><span class="d-inline-block w-100 h-100 border">出生日期:</span></div>
<div class="col-4"><input type="date" class="w-100"></div>
</div>
<div class="row py-2 bg-light text-center no-gutters">
<div class="col-2"><span class="d-inline-block w-100 h-100 border">身份证号:</span></div>
<div class="col-6"><input type="text" class="w-100" placeholder="身份证号"></div>
<div class="col-2"><span class="d-inline-block w-100 h-100 border">民族:</span></div>
<div class="col-2">
<select class="selected w-100 h-100" name="" id="">
<option value="1">汉族</option>
<option value="1">汉族2</option>
<option value="1">汉族1</option>
</select>
</div>
</div>
<div class="row py-2 bg-light text-center no-gutters">
<div class="col-2"><span class="d-inline-block w-100 h-100 border">居住地址:</span></div>
<div class="col-6"><input type="text" class="w-100" placeholder="居住地址"></div>
<div class="col-2"><span class="d-inline-block w-100 h-100 border">邮编:</span></div>
<div class="col-2"><input type="text" class="w-100" placeholder="邮编"></div>
</div>
</div>
</div>
<div class="row py-1 bg-light text-center no-gutters">
<div class="col-2"><span class="d-inline-block w-100 h-100 border">工作居住证:</span></div>
<div class="col-2 border"><input type="checkbox"/> <span>有</span> <input type="checkbox"/> <span>无</span></div>
<div class="col-2"><span class="d-inline-block w-100 h-100 border">户口性质:</span></div>
<div class="col-6 border">
<input type="checkbox"/> <span>本市城镇</span>
<input type="checkbox"/> <span>外市城镇</span>
<input type="checkbox"/> <span>本市农业</span>
<input type="checkbox"/> <span>外市农业</span>
</div>
</div>
<div class="row py-1 bg-light text-center no-gutters">
<div class="col-2"><span class="d-inline-block w-100 h-100 border">联系电话:</span></div>
<div class="col-2"><input class="w-100" type="text" placeholder="联系电话"></div>
<div class="col-2"><span class="d-inline-block w-100 h-100 border">户口所在地:</span></div>
<div class="col-2">
<select name="" id="" class="selected w-100 h-100">
<option value="1">北京</option>
<option value="2">北京1</option>
<option value="3">北京2</option>
<option value="4">北京3</option>
</select>
</div>
<div class="col-1"><span class="d-inline-block w-100 h-100 border">省</span></div>
<div class="col-2">
<select name="" id="" class="selected w-100 h-100">
<option value="1">北京</option>
<option value="2">北京1</option>
<option value="3">北京2</option>
<option value="4">北京3</option>
</select>
</div>
<div class="col-1"><span class="d-inline-block w-100 h-100 border">市</span></div>
</div>
<div class="row py-1 bg-light text-center no-gutters">
<div class="col-2 showparent">
<span class="d-inline-block w-100 showchild">本人简历:</span>
</div>
<div class="col-10">
<table class="table border">
<thead>
<tr>
<th>时间</th>
<th>公司</th>
<th>经历</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>2024.1.2</td>
<td>某茉网络公司</td>
<td>担任软件开发工程师</td>
<td>还行</td>
</tr>
<tr>
<td>2024.1.2</td>
<td>某茉网络公司</td>
<td>担任软件开发工程师</td>
<td>还行</td>
</tr>
<tr>
<td>2024.1.2</td>
<td>某茉网络公司</td>
<td>担任软件开发工程师</td>
<td>还行</td>
</tr>
<tr>
<td>2024.1.2</td>
<td>某茉网络公司</td>
<td>担任软件开发工程师</td>
<td>还行</td>
</tr>
<tr>
<td>2024.1.2</td>
<td>某茉网络公司</td>
<td>担任软件开发工程师</td>
<td>还行</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row py-1 bg-light text-center no-gutters">
<div class="col-3"><span class="d-inline-block w-100 h-100 border">所具职业资格:</span></div>
<div class="col-9"><input class="w-100" type="text" placeholder="请填写所具职业资格"></div>
</div>
</div>
</body>
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</html>