Print

CSS Ordered List 1, 1.1...1.10 Formatting and Alignment

What?
A quick article to remind me on how create an multi-level ordered list that indents and aligns correctly.

Why?
I'm finding that I need to do this quite often for some clients who want to include their terms and conditions in quote/invoice templates and want the HTML to be indented neatly.

Other examples out there will work, but I found that once the list count increased the number of digits (eg. 1.10) the text would be more indented (relative) to 1.1. I need all list elements to be all perfectly aligned.
copyraw 
// What I Have

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10   Item 1d
2.   Item 2
  1.  // What I Have 
  2.   
  3.  1.   Item 1 
  4.       1.1   Item 1a 
  5.       1.2   Item 1b 
  6.       ... 
  7.       1.9   Item 1c 
  8.       1.10   Item 1d 
  9.  2.   Item 2 
copyraw 
// What I Want

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10  Item 1d
2.   Item 2
  1.  // What I Want 
  2.   
  3.  1.   Item 1 
  4.       1.1   Item 1a 
  5.       1.2   Item 1b 
  6.       ... 
  7.       1.9   Item 1c 
  8.       1.10  Item 1d 
  9.  2.   Item 2 
copyraw 
// What I DON'T Want  (happens if you use list-style-position: outside)

1.   Item 1
      1.1  Item 1a
      1.2  Item 1b
      ... 
      1.9  Item 1c
     1.10  Item 1d
2.   Item 2
  1.  // What I DON'T Want  (happens if you use list-style-position: outside) 
  2.   
  3.  1.   Item 1 
  4.        1.1  Item 1a 
  5.        1.2  Item 1b 
  6.        ... 
  7.        1.9  Item 1c 
  8.       1.10  Item 1d 
  9.  2.   Item 2 

How?
I've been refining this based on several examples and the following solution seems to be the most stable:
copyraw 
ol {
    list-style-type: none;
    counter-reset: myCounter;
    display: table;
    margin: 0;
    padding: 5px 0 5px 15px;
}

ol > li {
    counter-increment: myCounter;
    display: table-row;
}

ol > li:before {
    content: counters(myCounter, ".") ". ";
    display: table-cell;
    position: relative;
    left:-12px;
}

li ol > li:before {
    content: counters(myCounter, ".") " ";
    position: relative;
    left:-15px;
}
  1.  ol { 
  2.      list-style-type: none; 
  3.      counter-reset: myCounter; 
  4.      display: table; 
  5.      margin: 0; 
  6.      padding: 5px 0 5px 15px; 
  7.  } 
  8.   
  9.  ol > li { 
  10.      counter-increment: myCounter; 
  11.      display: table-row; 
  12.  } 
  13.   
  14.  ol > li:before { 
  15.      content: counters(myCounter, ".") ". "; 
  16.      display: table-cell; 
  17.      position: relative; 
  18.      left:-12px; 
  19.  } 
  20.   
  21.  li ol > li:before { 
  22.      content: counters(myCounter, ".") " "; 
  23.      position: relative; 
  24.      left:-15px; 
  25.  } 

DEMO: See my JsFiddle at: jsfiddle.net/Jlipman/6vkw7tc3/4
Category: Cascading Stylesheets :: Article: 686