前端项目实战肆-兼容条形打印机移动端单位用毫米设定(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

相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
21 5
|
7天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
32 7
|
6天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
18 2
|
7天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
20 2
|
7天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
21 2
|
13天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
27 3
|
13天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
13 1
|
13天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
21天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
21天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0