Question

Why I cannot use display:table-row; with list-style-type:decimal; ?

my CSS file:

ol {
    list-style-type: decimal;
}

li {
    background-color: red;
    display: table-row;
}

my HTML file:

<ol>
    <li>This is the first.</li>
    <li>This is the second.</li>
</ol>

JSFiddle

Goal: I just want to display the numbers leading each line, with all <li> as long as the longest item.

Answer 1

Because list-style-type only works with display:list-item. :/

Per the specification:

list-style-type
  Applies to: elements with display: list-item

---

Edit Based on new information in your comments, you can do this on modern browsers:
http://jsfiddle.net/XMrbu/12/

ol {
   list-style-type:none;        
   counter-reset: sectioncounter;
}                      
li { display:table-row }
li:before {
   content: counter(sectioncounter) ":";
   counter-increment: sectioncounter;
   display:inline-block; width:2em; text-align:right;
   position:relative; left:-2.5em; margin-right:-2em;
}​

Or what about this:
http://jsfiddle.net/XMrbu/14/

ol {
   display:inline-block;
   list-style-type:decimal;
   background:rgba(255,0,0,0.2);
}                      

If you make the ol be display:inline-block (or float it) it will automatically collapse to the width of the longest item inside. You can then style the ol or li as you like to that width.