使用js给td添加边框,不同条件下tr和td的visibility以及display属性的应用

本文介绍了如何使用JS为HTML表格中的TD元素添加边框,并详细解释了visibility和display属性的区别及其应用场景。

*********************使用js给td添加边框*********************************

css设计如下:

.td {
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: 8DB1A1;
}

假设有个td这样定义:

   <td width="15%" class="tdtitle" nowrap id="name">
    <s:property value="getText(name)"/>&nbsp;
  </td>

可以按照如下方式给td添加边框

document.getElementById('name').className='td';

***************************************************************************

*******************visibility和display属性的应用**********************

visibility属性是隐藏但是tr或者td还是占有显示时候的位置,visibility:hidden(隐藏)、visible(显示)

display属性是隐藏tr或者td但是不占有显示时候的位置,display:block(显示)、none(隐藏)

<table style=" border: 1px solid black; border-collapse: collapse; width: 90mm; height: 50mm; table-layout: fixed; box-sizing: border-box; font-size: 10px; /* 减小基础字号 */ "> <!-- 第一行标题 --> <tr> <td colspan="3" style="padding: 2px; text-align: center; font-weight: bold;"> 资产管理票 </td> </tr> <!-- 资产编码行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px; width: 25%;"> 资产编码: </td> <td style="padding: 2px; width: 35%; overflow: hidden; text-overflow: ellipsis;"> $zcbm$ </td> <!-- 二维码单元格跨三行 --> <td rowspan="3" style=" border: 1px solid black; vertical-align: middle; text-align: center; width: 40%; padding: 2px; "> <!-- 二维码容器添加尺寸限制 --> <div style=" max-width: 100%; max-height: 30mm; overflow: hidden; margin: 0 auto; "> #QRCodeImg# </div> </td> </tr> <!-- 资产名称行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 资产名称: </td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis;"> $zcmc$ </td> </tr> <!-- 使用部门日期行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 使用部门: </td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis;"> $sybm$ </td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 启用日期: </td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis;"> $date$ </td> <!-- 空白单元格保持结构对齐 --> <td style="visibility: hidden;"></td> </tr> </table> 二维码宽度没一小块,被截止了
10-10
<table style=" border: 1px solid black; border-collapse: collapse; width: 50mm; height: 30mm; table-layout: fixed; box-sizing: border-box; font-size: 12px; "> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 1px; width: 8.89%;">资产编码:</td> <td style="padding: 1px; width: 8.89%; overflow: hidden; text-overflow: ellipsis;">$zcbm$</td> <td rowspan="3" style=" border: 1px solid black; vertical-align: middle; text-align: center; width: 71.12%; padding: 0; height: 10mm; overflow: hidden; "> <div style=" max-width: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto; overflow: hidden; "> #QRCodeImg# </div> </td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">资产名称:</td> <td style="padding: 1px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$zcmc$</td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">使用部门:</td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$sybm$</td> </tr> <tr style="border: 1px solid black; height: 20mm;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">启用日期:</td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$date$</td> <td style="visibility: hidden;"></td> </tr> </table>除了二维码都没有完全显示,修改代码并给出完整代码
最新发布
10-10
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值