我正在创建一个包含HTML的文档,该文档将包含长时间调查的结果。调查中的所有问题都不是必需的,并且通常不会记录许多字段的响应。
以下是我的HTML代码示例;
<p id="h1"> Section 1 - Introduction </p>
<p> </p>
<table id="t1">
<tr>
<th>
<div>
First Name
</div>
</th>
</tr>
<tr>
<td>
<div>
${R.Contact First Name}
</div>
</td>
</tr>
</table>
<p></p>
<table id="t1">
<tr>
<th>
<div>
Last Name
</div>
</th>
</tr>
<tr>
<td>
<div>
$(R.Contact Last Name}
</div>
</td>
</tr>
</table>
我的支持CSS:
<style>
table#t1 th
{
background-color: #EFF1F4;
text-align: left;
border: 1px solid #EFF1F4;
}
table#t1 td
{
background-color: white;
text-align: left;
border: 2px solid #EFF1F4;
}
table#t1
{
border-collapse: collapse;
width: 80%;
margin-left: 35px;
}
p#h2
{
font-size: 14px;
font-weight: italic;
padding: 0px 0px 0px 35px;
}
p#h1
{
font-size: 24px;
font-weight: bold;
padding: 25px 0px 0px 35px;
}
p#b1
{
page-break-after:always;
}
div
{
min-height: 15px;
font-size: 11px;
}
</style>
如果用户输入了值,我正在使用的程序将填充参数值($ {R.Contact First Name})。如果没有用户输入的值,此部分将显示空白。
我想要做的是将<tr>
设置为默认值“无响应”,使用较浅的文本颜色,并使用斜体,这样如果有响应,则会将其正常拉出,但是如果没有响应,则会使用这种格式不同的“无响应”文本。
**字符数是一个约束。该文档不得超过100,000个字符,因此理想情况下,解决方案将位于代码的CSS内,并且将在每个表中通过ID引用,而不是在每个表的开头设置文本字符串值。
这是可能还是我过度使用HTML的功能?
答案 0 :(得分:0)
使用:empty
psuedoselector:
CSS
p:empty {
position: relative;
}
p:empty:before {
color: #808080;
content: "This is CSS-generated.";
display: block;
position: absolute;
}
HTML
<p>
This has some content.
</p>
<p></p>
https://jsfiddle.net/yak613/2occ8j38/
但是,您需要确保元素内部没有空格,否则选择器将无法找到它。任何浏览器目前都不支持CSS4 :blank
选择器,但如果它确实有用,它甚至可以使用空格。 https://css-tricks.com/almanac/selectors/b/blank/