html - 在显示表行时更改隐藏表行中表数据的样式

Question

很难在标题中描述我想做什么，但基本上我有一个包含 9 列的表格，但其中一个是 display='none'。

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

我已经成功地将第二个 TD 的样式设置为白色背景、15px 填充和“红色边框”，但无法将边框设置为 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(或简写属性 border: 5px solid #c22034)来呈现边框。