<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 头部样式定义 */
.header {
padding-bottom: 10px; /* 设置头部的下内边距 */
border: 5px solid red; /* 设置边框 */
position: relative; /* 设置为相对定位 */
}
/* 表格样式定义 */
.quote-table {
width: 100%; /* 表格宽度 */
border: 5px solid red; /* 设置表格边框 */
border-collapse: collapse; /* 边框重叠样式 */
}
/* 设置每个单元格的基本样式 */
.quote-table td {
border-top: 2px solid black; /* 单元格的上边框 */
height: 90px; /* 单元格高度 */
font-size: 30px; /* 字体大小 */
font-family: Arial; /* 字体样式 */
position: relative; /* 使子元素的绝对定位基于此元素 */
}
/* 每行中的文本样式 */
.row-text {
position: absolute; /* 绝对定位 */
left: 25px; /* 文本的左偏移量 */
}
/* 竖线样式 */
.vertical-line {
position: absolute; /* 绝对定位 */
height: 377px; /* 竖线的默认高度 */
border-left: 2px solid black; /* 竖线样式 */
left: 1000px; /* 竖线的左偏移量 */
top: 0px; /* 竖线的上偏移量 */
}
/* 特殊高度的竖线样式 */
.special-height {
position: absolute; /* 绝对定位 */
height: 95px; /* 竖线的默认高度 */
border-left: 2px solid black; /* 竖线样式 */
left: 444px; /* 竖线的左偏移量 */
top: 0px; /* 竖线的上偏移量 */
}
/* 横线样式 */
.horizontal-line {
position: absolute; /* 使用绝对定位 */
width: 250px; /* 横线宽度，可以按需调整 */
border-top: 2px solid black; /* 定义线条样式 */
left: 0; /* 从左边开始 */
top: 50%; /* 初始位置，可以调整来移动横线位置 */
}
/* 标题样式 */
.title {
display: inline-block; /* 将span元素变为行内块级元素 */
position: absolute; /* 使用绝对定位 */
top: 10px; /* 标题的上偏移量 */
left: 0; /* 标题的左偏移量 */
}
/* 打印样式 */
@media print {
.quote-table {
width: 200mm; /* 设置表格的宽度 */
height: 300mm; /* 设置表格的高度 */
}
.quote-table td {
width: 100mm; /* 设置单元格的宽度 */
height: 50mm; /* 设置单元格的高度 */
}
}
</style>
</head>
<body>
<div class="print-body">
<div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<!-- 将图像移动到左侧 -->
<img id="hyperlogo" src="https://singsongpict.oss-cn-hangzhou.aliyuncs.com/singsong_log_js.png" style="width: 86px; margin-left: 30px" />
<span class="title" style="font-size: 48px; font-family: Arial; margin-left: 444px">Sample Quote Sheet</span>
</div>
<table class="quote-table">
<tr>
<td>
<div class="row-text" style="left: 10px; top: 33px;">ITEM No.</div>
<div class="vertical-line" style="left: 250px;"></div> <!-- 该竖线可以通过改变style属性中的值来调整 -->
<div class="row-text" style="left: 450px; top:30px;">用户输入的值</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class="row-text" style="left: 20px; top: 33px;">SIZE</div>
<!-- <div class="vertical-line" style="left: 150px;"></div>-->
<div class="row-text" style="left: 450px; top:30px;">用户输入的值</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class="row-text" style="left: 5px; top: 33px;">WEIGHT</div>
<!-- <div class="vertical-line" style="left: 150px;"></div>-->
<div class="row-text" style="left: 450px; top:30px;">用户输入的值</div>
<div class="vertical-line special-height" style="left: 800px;"></div>
<div class="row-text" style="left: 810px; top: 33px;">PORT</div>
<div class="vertical-line special-height" style="left: 900px;"></div>
<div class="row-text" style="left: 910px; top:30px;">值</div>
</td>
<td></td>
</tr>
<tr>
<td colspan="2" style="border: 2px solid black; height: 190px;">
<div style="display: flex; justify-content: space-between; position: relative;">
<span style="font-size: 30px; font-family: Arial; position: absolute; top: -80px; ">NOTE</span>
<span style="font-size: 14px; font-family: Arial; position: absolute; top: 80px; right: 890px;">用户输入的值</span>
<div class="horizontal-line"></div> <!-- 这是新添加的横线 -->
<!-- 用户上传的图片位置调整为完全在NOTE行内 -->
<img id="userImage" src="https://singsongpict.oss-cn-hangzhou.aliyuncs.com/singsong_log_js.png" alt="用户图片" style="position: absolute; right: 0px; bottom: -90px; width: 50mm; height: 50mm;">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--竖线的长度和高度：通过调整 .vertical-line 的 height 属性来更改竖线的高度。要更改特定的竖线高度，
可以为那个特定的竖线元素添加一个新的类或ID，并设置它的高度。-->
<!--每行的横线：通过调整 .quote-table td 的 border-top 属性来更改横线的宽度。要更改特定行的横线宽度，
可以为那个特定的行添加一个新的类或ID，并设置它的 border-top。-->
标签：表格,样式,偏移量,html,position,left,border,css,竖线 From： https://www.cnblogs.com/lyt263/p/17794026.html