在显示 table 行时更改隐藏 table 行中 table 数据的样式

Question

很难在标题中描述我想做什么，但基本上我有一个 table 和 9 列，但一个是 display='none'.

点击上面的行，隐藏行变为样式='table-row'。

我已成功将第二个 TD 的样式设置为白色背景、15px 填充和 "red borders"，但无法将边框设置为 5px...

这是我的代码（的重要部分）：

CSS:

.formbg{
    padding: 15px;
    border: 5px;   /* This line is not rendering on the output.*/
    border-color: #c22034;
    background-color: white;
    display: table-data;
}

HTML

<tr class='toolboxrow'><td onclick='getForms()' ><img onclick='getForms()' src='image.jpg' /></td>
<td><span class='tbtext' onclick='getForms()' >Order Forms</span></td></tr>

<tr id='PersonalForms' style='display:none'><td></td>
<td class='formbg'>
<h3>Personalized Forms</h3> 
<form action='DrsPortal.php' method='post'>
<input class='onlineform' name='title' placeholder='Title'  />
<input class='onlineform' name='given' placeholder='Given Name' />
<input class='onlineform' name='surname' placeholder='Surname' /><br>
<input class='onlineformsubmit' type='submit' value='Submit'>
</form>
</td>
</tr>

Javascript

function getForms(){
    document.getElementById('PersonalForms').style.display='table-row'
}

Answer 1

由于css属性"border-style"的初始值"none"，border-width没有效果。只需使用 border-style: solid（或 shorthand 属性 border: 5px solid #c22034）来渲染边框。

在显示 table 行时更改隐藏 table 行中 table 数据的样式

Change style of table data in hidden table row on reveal of table row

html

css

border

display