Question

我有一个大表，需要几秒钟才能完全渲染。上面的折叠几乎立即呈现，但是一旦表格完全呈现，额外的行被添加到th，因此整个表格向下移动一行，使用户点击他们没想到的地方。我想将额外的行添加到第一个th的内联样式中，但我无法弄清楚如何。

渲染完成后，

th:after会被替换，因此这将是一个额外线路的理想位置，但我似乎无法做到这一点。此外，您似乎无法使用内联css更改th:after，我可能不得不在第一个id上放置th。

我一直在使用https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table进行测试。我在<html>之后插入了下面的内容，但没有一个换行，至少在Chrome 65中没有。

<head><style>
th:after{content:"1<p>2</p>3<div>4</div>\a5<br>6";}
</style></head>

在那里添加一个空格会形成一个新行，但这只是因为包装。如果你缩小得足够远，它会回到一行。

谢谢。

编辑添加：

我使用padding-bottom进行了实验，但浏览器之间的高度并不一致。 1.4em是我最接近的人，但在Windows上的Chrome浏览器中略大，而Linux上的Chrome浏览器略微过小。

Lister先生的答案在<!DOCTYPE html>的任何地方都能完美无缺，但我的所有页面都使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。对于后者，它仍然可以在Chrome和Internet Exploder中完美运行，但似乎没有在Firefox中做任何事情。如果切换到<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">，Firefox确实可以正常工作，但W3C HTML验证器会给我5044个错误。

所以我想问题应该是，是否有HTML 4.01 Transitional方式来做到这一点？

如果我在Lister先生的答案中的两个test之后添加\0A，则会在Firefox中正确呈现两行。因此，将content添加到after工作正常，但只有两个\0A显示在它们之后是否有文本（空格什么都不做，字面上显示html）。

编辑添加解决方案：

em无法正常工作的原因是因为不同的字体具有不同的高度。字体通常因操作系统和浏览器而异，因此固定高度永远不会起作用。我发现获得正确高度的唯一方法是将最终字符放在那里并使它们不可见：

＆＃13;

<script>
newStyle=document.createElement('style');
newStyle.type='text/css';
newStyle.innerHTML="span.ph{visibility:hidden;}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
</script>
<table>
  <tr>
    <th>This is a th<span class='ph'><br>&#x25B4;</span></th>
  </tr>
  <tr>
    <td>This is a td</td>
  </tr>
</table>
<script>
newStyle.innerHTML='span.ph{display:none;}';
</script>

＆＃13;

谢谢大家的帮助！

Answer 1

诀窍是包含两个换行符，因为第一个换行符将不可见，并在:: after伪元素上设置white-space属性。

＆＃13;

False

＆＃13;

table, th, td {
  border: 1px solid;
}

th::after {
  content: '\0A\0A';
  white-space: pre;
}

＆＃13;

Answer 2

如何创建最初为“空”的占位符，并在数据准备就绪时填充？

示例：

function change() {
  document.getElementById('placeholder').innerText = "result";
}

<table>
  <tr>
    <th>Header cell<br />
      <span id="placeholder">&nbsp;</span>
    </th>
  </tr>
  <tr>
    <td>Body cell</td>
  </tr>
</table>
<br/>
<button onclick="change()">Add header content</button>

如何在th的末尾添加额外的一行？

2 个答案: