问题描述
我正在尝试创建一个嵌入在表格中的反向排序列表,因此每个列表项都是一个表格行。这样我就可以有一个带有单独列的编号表。以下代码执行此操作,但会导致编号未对齐的问题。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<h3><b><u>2020</u></b></h3>
<table cellpadding="6">
<ol reversed>
<li>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</li>
<li>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</li>
<li>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</li>
</ol>
</table>
</body>
</html>
将此与每个单元格是自己的表格时的标准行为进行比较(我不想要)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<h3><b><u>2020</u></b></h3>
<ol reversed>
<li>
<table cellpadding="6">
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</table>
</li>
<li>
<table cellpadding="6">
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</table>
</li>
<li>
<table cellpadding="6">
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</table>
</li>
</ol>
</body>
</html>
解决方法
您不能像那样混合使用表格和列表。您可以拥有表或有序列表的语义,但不能混合使用。另一方面,在符合 HTML 有效性的同时从正确的数字开始自动反向编号并倒计时到 1 是很棘手的。我们可以像这样在每一行的开头添加样式列表项作为额外的单元格。
li {
display: contents;
}
tr::before {
display: list-item;
content: '';
}
<h3><b><u>2020</u></b></h3>
<ol reversed>
<li>
<table cellpadding="6">
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</table>
</li>
</ol>
CSS 中有 proposals for creating auto start value reversed counters,但还没有实现,所以我们要么需要这个相当笨拙且无语义的 ol[reversed]/li 包装器,要么必须手动将计数器开始设置为表格行数 + 1 ,根据 Mrvs 的回答。
,试试这个
table {
counter-reset:numbers 4;
}
tr {
counter-increment: numbers -1;
}
tr:before {
content: counter(numbers) ". ";
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<h3><b><u>2020</u></b></h3>
<table cellpadding="6">
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
<tr>
<td style="vertical-align: baseline;"><p>Testing</p></td>
<td style="vertical-align: baseline;"><p>testing 2</p></td>
</tr>
</table>
</body>
</html>