Question

我正在创建一个包含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的功能？

Answer 1

使用: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/

通过CSS

1 个答案: