html - 如何在 HTML/CSS 中创建枚举表格环境？

Question

我需要在三列、表格、枚举环境中的 HTML 页面中显示一些数据，如下所示:

1. elephant           animal               a large animal that
                                           eats leaves
2. fish               animal               an animal that
                                           swims in the ocean
3. cactus             plant                a plant that lives
                                           in dry places

• 不需要水平或垂直规则。
• 每条数据都在一个左对齐的“盒子”中，因此如果任何文本需要换行，它仍会保留在其列中。

是否有用于呈现枚举表格环境的干净的 HTML 或 CSS 解决方案？

Answer 1

您可以使用 CSS Counter 功能自动生成数字，如下例所示:

table{
    counter-reset: rows; /* initalize the counter variable */
}
tr{
    counter-increment: rows; /* increment the counter every time a tr is encountered */
}
td{ /* just for demo */
    vertical-align: top;
    width: 100px;
}
td:first-child:before{ /* add the counter value before the first td in every row */
    content: counter(rows) ". ";
}

Fiddle Demo

注意:

1. 根据 Can I Use , CSS 计数器也被低版本的 IE 支持。
2. 如果数据真的像您提到的那样是表格数据，那么使用 table 元素本身就没有错。
3. 每当遇到 table 标记时，我们都会执行 counter-reset 以确保新表中的每一行始终以 1 开头。如果编号必须继续进入另一个表中的数据，然后我们可以在公共(public)父级别(或者如果没有，则在 body)重置计数器。
4. 在 IE(v8 到 v10)、Firefox、Opera 和 Chrome 中进行了测试，在所有这些浏览器中的运行完全相同。 JS Fiddle 在 IE 低版本中无法正常打开，所以你可以使用这个 JS Bin演示样本。