CSS-表格样式

滑动表格

外层嵌套一个盒子设置固定大小，并添加overflow:hidden auto只有y轴滑动，隐藏x轴滑动

表头固定不滑动可以添加position:sticky;top:0

  <div style="width:878px;height:685px;overflow:hidden auto" class="tableDiv">
        <n-table class="Tab-1-table">
          <thead style="position:sticky;top:0">

          </thead>
          <tbody>

          </tbody>
        </n-table>
      </div>
    </div>
  </div>

不想显示滑动条可以添加：

    .tableDiv::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

使表格不超出固定宽度，文字自适应换行

  .Tab-1-table {
      table-layout: fixed;
      word-break: break-word;
      word-wrap: break-word;
   }

表格组件：https://www.naiveui.com/zh-CN/os-theme/components/table

表格单元格合并

<table>
			<!-- 表格行标签 -->
			<tr style="background-color: #ccc;">
				<!-- 表格表头单元格标签 -->
				<th rowspan="2"></th>
				<th rowspan="2">工作职责</th>
                <th rowspan="2">工作要求</th>
                <th colspan="2">评语/描述</th>
			</tr>
            <tr style="background-color: #ccc;">
                <th>评分栏</th>
                <th>给予1分、2分及不适用的项目, 请尽量给予评语/描述</th>
			</tr>
			<tr style="background-color: #ccc;">
				<td>A.</td>
				<td>销售业绩 30%</td>
                <td></td>
                <td>0</td>
                <td>A项小计：</td>
			</tr>
			<tr>
				<td rowspan="2">1</td>
                <td rowspan="2">个人销售业绩</td>
                <td>完成个人销售目标＊<br>
                    1分-达标度低于85% ; 2分达标度达85％ - 99％；<br>
                    3分-达标度达100% - 110%；4分-达标度高于110%</td>
                <td></td>
                <td rowspan="2"></td>
			</tr>
            <tr>
                <td>除个人销售目标外，同时达成不同的细化目标，以达到货品类别平衡的效果(例如: 太阳/光学/GJ/镜片/ ZEISS/NIKON/星星/其它目标<br>
                    1分-一项细化目标达标; 2分-两到三项细化目标达标;<br>
                    3分-四项细化目标达标; 4分-四项以上细化目标达标</td>
                <td></td>
            </tr>
            <tr style="background-color: #ccc;">
				<td>B.</td>
				<td>服务和销售技巧 20%</td>
                <td></td>
                <td>0</td>
                <td>B项小计：</td>
			</tr>
			<tr>
				<td>2</td>
                <td>服务九步骤</td>
                <td>根据公司的服务九步骤，为顾客提供优质的服务</td>
                <td></td>
                <td rowspan="6"></td>
			</tr>
            <tr>
                <td rowspan="5">3</td>
                <td rowspan="5">了解需求及产品FAB介绍</td>
                <td>在推荐产品前，能够有意识通过非销话题进行破冰，并通过观察，提问等方式充分了解顾客需求</td>
                <td></td>
            </tr>
            <tr>
                <td>良好的产品知识，能够介绍产品名称/品牌/设计/材质/功能/好处</td>
                <td></td>
            </tr>
            <tr>
                <td>挑选合适的产品，突出产品的好处，并融入顾客生活的使用当中</td>
                <td></td>
            </tr>
            <tr>
                <td>做产品比较时，向顾客解释不同的优秀之处，并突出重点</td>
                <td></td>
            </tr>
            <tr>
                <td>在为顾客推荐产品的过程中，有推荐高单价产品的意识</td>
                <td></td>
            </tr>
            <tr style="background-color: #ccc;">
				<td>C.</td>
				<td>店铺顾客关系管理及跟进 15%</td>
                <td></td>
                <td>0</td>
                <td>C项小计：</td>
			</tr>
            <tr>
				<td rowspan="2">4</td>
                <td rowspan="2">顾客关系管理</td>
                <td>能按ROD发放的「9个月前购买镜片顾客报表」跟进顾客验眼回访，并遵照程序完成POS系统的「服务单Service Memo(Q单)及(R单)」<br>
                    1分-跟进度低于80% ; 2分-跟进度81% - 90%；<br>
                    3分-跟进度91% - 95%；4分-跟进度96% - 100%</td>
                <td></td>
                <td rowspan="3"></td>
			</tr>
            <tr>
                <td>能分析自己VIP客群的喜好款式及购买习惯，主动运用公司新货品信息市场活动、眼镜调较及保养、眼镜佩戴舒适度等邀请VIP回访，提升销售机会</td>
                <td></td>
            </tr>
            <tr>
				<td>5</td>
                <td>顾客销售跟进</td>
                <td>能有效跟进顾客订购货品/零件、眼镜维修、镜片预订和加工</td>
                <td></td>
			</tr>
            <tr style="background-color: #ccc;">
				<td>D.</td>
				<td>验光 10%</td>
                <td></td>
                <td>0</td>
                <td>D项小计：</td>
			</tr>
			<tr>
				<td>6</td>
                <td>验光过程沟通</td>
                <td>验光过程中，能够与顾客有详细且耐心的沟通，了解顾客的眼睛状况，并耐心解答顾客的异议，根据顾客需求，推荐合适镜片</td>
                <td></td>
                <td rowspan="4"></td>
			</tr>
            <tr>
                <td>7</td>
                <td>验光技巧</td>
                <td>按照公司标准验光流程为顾客验眼，且操作娴熟</td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td>镜片介绍</td>
                <td>根据顾客的眼睛需求，向顾客推荐镜片并联想顾客的生活场景给到说明</td>
                <td></td>
            </tr>
            <tr>
                <td>9</td>
                <td>眼镜调整</td>
                <td>若有需要，主动为顾客提供眼镜调整服务，确保顾客佩戴舒适度</td>
                <td></td>
            </tr>
            <tr style="background-color: #ccc;">
				<td>E.</td>
				<td>培训学习 10%</td>
                <td></td>
                <td>0</td>
                <td>E项小计：</td>
			</tr>
			<tr>
				<td>10</td>
                <td>投入学习</td>
                <td>在不同培训中，包括培训部的课堂或店铺培训都能投入学习(评分时，可参考培训部对同事的课堂表现的评分)</td>
                <td></td>
                <td rowspan="3"></td>
			</tr>
            <tr>
                <td>11</td>
                <td>培训知识或会议信息分享</td>
                <td>参与培训或会议后，在店铺分享培训知识或会议信息</td>
                <td></td>
            </tr>
            <tr>
                <td>12</td>
                <td>辅助教导店铺同事</td>
                <td>透过亲身培训或辅导协助其他同事提升工作表现</td>
                <td></td>
            </tr>
            <tr style="background-color: #ccc;">
				<td>F.</td>
				<td>个人心态和遵守 10%</td>
                <td></td>
                <td>0</td>
                <td>F项小计：</td>
			</tr>
			<tr>
				<td rowspan="2">13</td>
                <td rowspan="2">心态良好</td>
                <td>有承担感和责任心，能履行自己的工作职责</td>
                <td></td>
                <td rowspan="3"></td>
			</tr>
            <tr>
                <td>在不同工作上积极主动提供协助</td>
                <td></td>
            </tr>
            <tr>
                <td>14</td>
                <td>遵从守则</td>
                <td>遵从公司的规定和工作守则 (例如: 销售发票及程序)</td>
                <td></td>
            </tr>
            <tr style="background-color: #ccc;">
				<td>G.</td>
				<td>日常店务 5%</td>
                <td></td>
                <td>0</td>
                <td>G项小计：</td>
			</tr>
			<tr>
				<td>15</td>
                <td>货品陈列</td>
                <td>能按店铺销售目标组织及整理店内陈列，包括橱窗、柜台及展品陈列柜</td>
                <td></td>
                <td rowspan="3"></td>
			</tr>
            <tr>
                <td>16</td>
                <td>货品整理</td>
                <td>点算库存和盘点，妥善记录收货和退货的数量</td>
                <td></td>
            </tr>
            <tr>
                <td>17</td>
                <td>店铺会议</td>
                <td>在所参与店铺会议中，能发挥经验促进讨论</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3"></td>
                <td style="background-color: #ccc;">总分</td>
                <td>0.00</td>
            </tr>
	</table>

表格固定每列宽度

第一列占表格总宽度的百分之八十，第二列占表格总宽度的百分之二十

    <table>
        <col style="width: 80%;">
        <col style="width: 20%;">
        <thead>
            <tr>
				<!-- 表格表头单元格标签 -->
				<th>改善/提高工作表现之计划</th>
                <th>检讨日期</th>
			</tr>
        </thead>
        <tbody>
            <tr>
                <td>计划</td>
                <td>2024.08.13</td>
            </tr>
        </tbody>
    </table>

表格文字居上显示

<td valign="top"></td>