随着现在UI框架组件的完善和丰富，各种原生属性都衍生出了对应的属性字段，经过封装转换也变得更加好用。需要什么功能添加对应的属性字段即可。但是，脱离哪些组件框架之后，一个最朴素的网页往往只需要最简单的代码。
比如实现：一个固定表格和列的表格，表格内容自适应宽度。且整个表格内容限制在某个div中，超出内容显示滚动条
单html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.table {
width: 700px;
height: 300px;
overflow: auto;
margin: 50px auto;
}
.table-container {
/* position: relative; */
/* overflow: auto; */
}
.table .table-container table {
width: max-content;
}
.table table tr {
/* position: relative; */
}
.table table thead{
z-index: 10;
position: sticky;
top: 0;
height: 50px;
background: #fff;
}
.table table td {
border: 1px solid #ebeef5;
padding: 8px 10px;
font-size: 14px;
color: #666;
}
.table .table-container .fixed {
position: sticky;
left: 0;
background-color: #fff;
}
.table .table-container .fixed1{
position: sticky;
left: 50px;
background-color: #fff;
}
</style>
</head>
<body>
<div>
<div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td >序号</td>
<td >物种</td>
<td >年龄</td>
<td >描述</td>
<td >体重</td>
<td >肤色</td>
<td >牙齿</td>
<td >健康</td>
</tr>
</thead>
<tbody>
<tr>
<td>张张三张三张三三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路，你是一条你是一条神奇的天路，你是一条神奇的天路神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
<tr>
<td>张三</td>
<td>人</td>
<td>12</td>
<td>你是一条神奇的天路</td>
<td>136</td>
<td>黑</td>
<td>白</td>
<td>良好</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
</script>
</body>
</html>这里自适应宽度主要用到了 width:max-content属性，除此之外还有一种属性：<td nowrap >单元格内容</td>；强制不换行，来达到让表格根据内容自适应宽度。
合并行列多级表格的情况：
单html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保险信息表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table,
th,
td {
border: 1px solid #ccc;
}
th,
td {
padding: 8px;
text-align: center;
}
.sticky-col {
position: sticky; /* 使用 sticky 定位 */
left: 0;
background-color: #f2f2f2; /* 背景颜色 */
z-index: 1; /* 层叠上下文 */
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table style="border-collapse: collapse;width: 100%;">
<thead>
<tr>
<th nowrap>序号</th>
<th nowrap>保单号</th>
<th nowrap>是否续保</th>
<th nowrap>续保单号</th>
<th nowrap>有效日期</th>
<th nowrap>社保投保</th>
<th nowrap>操作</th>
<th nowrap>险种代码</th>
<th nowrap>险种名称</th>
<th nowrap>保额</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">22</td>
<td rowspan="4">G1122</td>
<td rowspan="4">是</td>
<td rowspan="4">XB1122</td>
<td rowspan="4" nowrap>20240101-20250101</td>
<td rowspan="4">有</td>
<td rowspan="4" nowrap><a href="#">投保记录</a></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">
<table>
<thead>
<tr>
<th>序号</th>
<th>责任代码</th>
<th>责任名称</th>
<th>限额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">
<table>
<thead>
<tr>
<th>序号</th>
<th>责任代码</th>
<th>责任名称</th>
<th>限额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">G1122</td>
<td rowspan="2">是</td>
<td rowspan="2">XB1122</td>
<td rowspan="2">20240101-20250101</td>
<td rowspan="2">有</td>
<td rowspan="2"><a href="#">投保记录</a></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">
<table>
<thead>
<tr>
<th>序号</th>
<th>责任代码</th>
<th>责任名称</th>
<th>限额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9527</td>
<td>住院保险</td>
<td>1000</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>主要就是对 rowspan colspan的理解和使用罢了。当然这些也算不上特别复杂。但是如果你真的遇到了，也算的上特别实用的一种。借此没准就让你有了新的想法，能帮助你解决你的一时之需也说不定。
如果单用html代码写 后期的代码数据不太方便维护
但是在遇到一些老项目的时候就只能用原生，不然我也不会写这篇博客了（╯‵□′）╯︵┴─┴