gpt4 book ai didi

javascript - 如何在 th 的末尾添加额外的一行?

转载 作者:太空宇宙 更新时间:2023-11-04 01:17:38 25 4
gpt4 key购买 nike

我有一张大 table ,需要几秒钟才能完全呈现。上面的折叠几乎立即呈现,但是一旦表格完全呈现,就会向 th 添加额外的一行所以整个表格向下移动一行,让用户点击他们没有想到的地方。我想将额外的行添加到第一个 th 的内联样式中,但我不知道该怎么做。

th:after在渲染完成后被替换,所以那将是放置额外线条的理想位置,但我似乎无法完成这项工作。此外,您似乎无法更改 th:after使用内联 css,我可能不得不放一个 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 方法可以做到这一点?

如果我添加 test后二\0A在 Lister 先生的回答中,它在 Firefox 中正确呈现了两行。所以添加 contentafter工作正常,但两个 \0A只有在它们后面有文本时才会显示(空格什么都不做,html 会按字面显示)。

编辑添加解决方案:

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

<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>

谢谢大家的帮助!

最佳答案

如何创建一个一开始是“空”的占位符,并在数据准备好时填充?

例子:

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>

关于javascript - 如何在 th 的末尾添加额外的一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49804503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com