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

效果演示