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

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

样式

#customers {
    margin: 0;
    padding: 0;
    padding: 1mm 0;
    width: 40mm;
    height: 50mm;
    text-align: center;
    box-sizing: border-box;
}
#customers tr{
    display: block;
    height: 6mm;
    border: 1px solid #ccc;
}
td{
    font-family: "黑体";
    font-weight: "bold";
}
.imgData{
    display: block;
}

 骨架

 <table id='customers'>
                        <tr>
                            <td>
                                日期:
                            </td>
                            <td>
                                {item?.date}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                制单:
                            </td>
                            <td>
                                {item?.manufactureCode}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                款号:
                            </td>
                            <td>
                                {item?.style}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                颜色:
                            </td>
                            <td>
                                {item?.color}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                床次:
                            </td>
                            <td>
                                {item?.bedSeq}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                尺码:
                            </td>
                            <td>
                                {item?.size}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                数量:
                            </td>
                            <td>
                                {item?.total}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img className='imgData' src={`data:image/jpeg;base64,${item?.base64}`}></img>
                            </td>
                        </tr>
                    </table>

运行结果