前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)

简介: 前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)

大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识


利用th加深样式


tr代表行,td代表列th标签是表格下的一种标签代表表头,它和td标签的区别是:th元素内部的文本通常会呈现为居中的粗体文本

<table id='customers'>
                        <tr>
                            <th>
                                日期:
                            </th>
                            <th>
                                {item?.date}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                款号:
                            </th>
                            <th>
                                {item?.style}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                颜色:
                            </th>
                            <th>
                                {item?.color}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                床次:
                            </th>
                            <th>
                                {item?.bedSeq}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                尺码:
                            </th>
                            <th>
                                {item?.size}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                床号:
                            </th>
                            <th>
                                {item?.bedCode}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                扎号:
                            </th>
                            <th>
                                {item?.lotCode}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                PO:
                            </th>
                            <th>
                                {item?.orderCode}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                数量:
                            </th>
                            <th>
                                {item?.count}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                部位:
                            </th>
                            <th>
                                {item?.part}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                验片:
                            </th>
                            <th>
                                {item?.result}
                            </th>
                        </tr>
                        <tr>
                            <th>
                                <img className='imgData' src={`data:image/jpeg;base64,${item?.base64}`}></img>
                            </th>
                        </tr>
                    </table>


效果演示

image.png

相关文章
|
8天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
17 3
|
10天前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
18天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
35 2
|
19天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
28 2
|
24天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
20 1
|
25天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
1月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
81 0
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
130 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。