2

我需要在三列、表格、枚举环境中的 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 解决方案来呈现枚举的表格环境？

4

2 回答 2

3

您可以使用 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) ". ";
}

小提琴演示

笔记：

  1. 根据Can I Use，较低版本的 IE 也支持 CSS 计数器。
  2. 如果数据确实是您提到的表格数据，那么使用table元素本身就没有错。
  3. counter-reset每当遇到标签时，我们都会做一个table以确保新表中的每一行始终以 1 开头。如果编号必须继续到另一个表中的数据，那么我们可以在公共父级级别重置计数器（或如果没有，那么在body）。
  4. 在 IE（v8 到 v10）、Firefox、Opera 和 Chrome 中进行了测试，并且在所有这些中的工作方式完全相同。JS Fiddle 在 IE 较低版本中无法正常打开，因此您可以使用此JS Bin示例进行演示。
于 2014-09-09T07:27:02.470 回答
1

你可以用 CSS 做到这一点：

table {
counter-reset: rowNumber;
}

table tr {
counter-increment: rowNumber;
}

table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}

演示小提琴

但我建议 JS：

var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';
console.log(text);

for (var i = 0, len = rows.length; i < len; i++){
   rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}

演示小提琴

于 2014-09-09T07:57:54.523 回答