强制存在空表格单元格

Question

我正在使用表来显示代码，以及一些CSS魔术：

* { tab-size: 4; }
body { background-color: lightsteelblue; }
table, tr, td {
	text-align: left;
	border-collapse: collapse;
	border: none;
	margin: 0px;
	padding: 0px;
	background: none;
}
table {
	font-family: "Courier New";
	font-size: 14px;
	margin: 0px;
	display: inline-block;
	border: 3px solid black;
	padding: 0px;
	border-radius: 10px;
	counter-reset: linenumbers;
	background-color: white;
}
table tr td:last-child {
	white-space: pre;
	display: block;
	margin: 0px;
	padding: 0px;
	color: black;
}
table tr td:first-child {
	text-align: right;
	background-color: black;
}
table tr td:first-child:before {
	user-select: none;
	display: inline-block;
	counter-increment: linenumbers;
	content: counter(linenumbers);
	text-align: right;
	color: white;
	padding: 0px;
	padding-right: 2px;
	margin: 0px;
	max-width: none;
}
table tr:hover td:last-child {
	background-color: rgba(0,0,0, 0.1);
	border-radius: 1em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

<table>
    <tr><td></td><td>#include &lt;iostream&gt;</td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td>int main()</td></tr>
    <tr><td></td><td>{</td></tr>
    <tr><td></td><td>&#9;std::cout &lt;&lt; "Hello, world!" &lt;&lt; std::endl;</td></tr>
    <tr><td></td><td>}</td></tr>
</table>

问题是第二行第2行显示但是在您选择所有代码并复制粘贴时不会复制。当您将鼠标悬停在它上面时，它也不会改变它的背景颜色。如何强制它存在而不在其中放入内容？复制并粘贴到记事本等纯文本编辑器时，需要保留空行，并且需要为空白。没有可能使编译器绊倒的零宽度连接技巧。

Answer 1

您可以使用HTML实体
，即“新行”（\n），并将进行复制粘贴。没有人物不能被“复制”。或者，您可以使用 ，但这会增加额外的空间。

作为旁注，您可以查看CodeMirror，这样您就不需要重新发明轮子了（但也许这只是一个练习，或者您可以有任何充分的理由，只是说。）

* { tab-size: 4; }
body { background-color: lightsteelblue; }
table, tr, td {
	text-align: left;
	border-collapse: collapse;
	border: none;
	margin: 0px;
	padding: 0px;
	background: none;
}
table {
	font-family: "Courier New";
	font-size: 14px;
	margin: 0px;
	display: inline-block;
	border: 3px solid black;
	padding: 0px;
	border-radius: 10px;
	counter-reset: linenumbers;
	background-color: white;
}
table tr td:last-child {
	white-space: pre;
	display: block;
	margin: 0px;
	padding: 0px;
	color: black;
}
table tr td:first-child {
	text-align: right;
	background-color: black;
}
table tr td:first-child:before {
	user-select: none;
	display: inline-block;
	counter-increment: linenumbers;
	content: counter(linenumbers);
	text-align: right;
	color: white;
	padding: 0px;
	padding-right: 2px;
	margin: 0px;
	max-width: none;
}
table tr:hover td:last-child {
	background-color: rgba(0,0,0, 0.1);
	border-radius: 1em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

<table>
    <tr><td></td><td>#include &lt;iostream&gt;</td></tr>
    <tr><td></td><td>&NewLine;</td></tr>
    <tr><td></td><td>int main()</td></tr>
    <tr><td></td><td>{</td></tr>
    <tr><td></td><td>&#9;std::cout &lt;&lt; "Hello, world!" &lt;&lt; std::endl;</td></tr>
    <tr><td></td><td>}</td></tr>
</table>