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-style: solid（或简写属性border: 5px solid #c22034）来渲染边框。

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

1 个答案: