gpt4 book ai didi

html - 仅当打印表格时表格前的空格

转载 作者:行者123 更新时间:2023-11-28 02:24:07 24 4
gpt4 key购买 nike

我正在为 K-6 年级制作一份成绩单,它根据学生的成绩打印某些表格。例如,五年级学生的成绩单上不会显示“阅读阶段”,但一年级学生会。我已经正确格式化了样式以有条件地打印表格,但这是我正在努力处理的表格之间的间距。

我希望表格之间有一个标准的空间量,所以我尝试了一些方法,比如添加一个空白行作为表格的第一行,或者添加 margin-top=50pt。我尝试过的所有方法都会为所有表添加空间,甚至是隐藏的表,因此表之间有时会有 200 点死空间。不好。

我需要一种(创造性的)方法来有条件地添加空间,仅当要打印表格时。

最佳答案

我不确定您是如何隐藏您的的。如果您通过 HTML5 hidden 属性或 display: none 隐藏它们,则上边距不会干扰您的布局。

如果出于某种原因您无法通过其中一种方式隐藏您的内容,CSS negation可能会有帮助。在这个例子中,我是说所有不属于某个 class 的表都应该有 margin-top: 1em

table:not(.skip) {
margin-top: 1em;
}

.skip {
position: relative;
background-color: yellow;
}

.skip::after {
position: absolute;
top: 3px;
left: 150%;
content: ' <-- no margin-top';
white-space: nowrap;
}
<table>
<tr>
<td>table</td>
</tr>
</table>

<table class="skip">
<tr>
<td>table</td>
</tr>
</table>

<table>
<tr>
<td>table</td>
</tr>
</table>

<table class="skip">
<tr>
<td>table</td>
</tr>
</table>

<table>
<tr>
<td>table</td>
</tr>
</table>

关于html - 仅当打印表格时表格前的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55465141/

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