2

I need to display some data in an HTML page in a three-column, tabular, enumerated environment, like this:

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
  • No horizontal or vertical rules are necessary.
  • Each piece of data is in a left-aligned "box", so if any text needs to wrap, it still stays in its column.

Is there a clean HTML or CSS solution for presenting enumerated tabular environments?

Harry
  • 87,580
  • 25
  • 202
  • 214
Village
  • 22,513
  • 46
  • 122
  • 163
  • Is your data in a table (or) by "box" do you mean a `div`? If it is in a table, you can have a look at this [example](http://jsfiddle.net/dfmb1d94/). It makes use of CSS counters to auto-generate the numbers and it actually is supported in lower IE vesions also. – Harry Sep 09 '14 at 07:21
  • I just mean "box" as in, the text are bound inside an invisible rectangle. When the text from one column wraps to the next line, it doesn't flow into the other columns. There is currently no HTML around any of the data, so any format is fine. – Village Sep 09 '14 at 07:28

2 Answers2

3

You can make use of the CSS Counter functionality to auto-generate the numbers like shown in the below example:

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

Note:

  1. As per Can I Use, CSS Counters are supported by lower versions of IE also.
  2. If the data is really tabular data as you have mentioned then there is nothing wrong in using the table elements itself.
  3. We are doing a counter-reset whenever a table tag is encountered to make sure that each row in a new table always starts with 1. If the numbering has to continue into a data in another table, then we can reset the counter at the common parent's level (or if none then at body).
  4. Tested in IE (v8 to v10), Firefox, Opera and Chrome and works exactly the same in all of them. JS Fiddle doesn't open properly in IE lower versions, so you can use this JS Bin sample for demo.
Harry
  • 87,580
  • 25
  • 202
  • 214
  • 2
    I did not realize a solution using ``, `` and `
    `, could look so clean.
     – Village Sep 09 '14 at 07:33
  • And I have just tried in IE till v7 and surprisingly, it works just as fine :) You can use this [JS Bin](http://jsbin.com/xikanogopeli/2/edit) for testing in lower versions of IE as JSFiddle doesn't seem to open properly in them. – Harry Sep 09 '14 at 07:35
  • Sorry for the typo error in the above comment, I actually meant till IE v8 and not IE v7. – Harry Sep 09 '14 at 07:42
1

You can do this with 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;
}

Demo fiddle

But I'd suggest 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];
}

Demo fiddle

dan
  • 67
  • 1
  • 1
  • 9