Display content outside of table - html

Question

I'm trying to number all rows of a custom div table displaying the numbers outside content how you can see on image displayed bellow.
But I have no clue how to that using css, if someone can help me with bright idea.
I have tried using :before and adding a content but I don't know why is not working :|
This is a small fiddle with my div table .

Answer 1

Here is an example:
.table {
display:table;
border: 0px solid #444;
border-collapse: collapse;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding:2px;
border: 1px solid #ccc;
}
.header {
font-weight:bold;
text-align:center;
}
<div class="table">
<div class="row" style="border-width:0">
<div class="" style="border-width:0"></div>
<div class="cell" style="border-width:0">1</div>
<div class="cell" style="border-width:0">2</div>
<div class="cell" style="border-width:0">3</div>
<div class="cell" style="border-width:0">4</div>
</div>
<div class="row">
<div class=" header">1</div>
<div class="cell header">Team</div>
<div class="cell header">Wins</div>
<div class="cell header">Losses</div>
<div class="cell header">Pct</div>
</div>
<div class="row">
<div class="">2</div>
<div class="cell">Bulls</div>
<div class="cell">29</div>
<div class="cell">18</div>
<div class="cell">.617</div>
</div>
<div class="row">
<div class="">3</div>
<div class="cell">Pacers</div>
<div class="cell">28</div>
<div class="cell">19</div>
<div class="cell">.596</div>
</div>
<div class="row">
<div class="">4</div>
<div class="cell">Bucks</div>
<div class="cell">25</div>
<div class="cell">21</div>
<div class="cell">.617</div>
</div>
</div>
http://fiddle.jshell.net/RFWT5/23/

Answer 2

You can use css counters for this.
Display them in a pseudo element on the row:
.table {
display:table;
border: 2px solid #444;
border-collapse: collapse;
margin-left: 50px;
margin-top: 50px;
}
.row {
display:table-row;
position: relative;
}
.cell {
display:table-cell;
padding:2px;
border: 1px solid #ccc;
}
.header {
font-weight:bold;
text-align:center;
position: relative;
}
.row:nth-child(n+2) {
counter-increment: rowno;
}
.row:nth-child(n+2)::before {
content: counter(rowno);
position: absolute;
left: 30px;
}
.row:first-child::before {
content: "";
position: absolute;
left: 30px;
}
.header {
counter-increment: colno;
}
.header::before {
content: counter(colno);
position: absolute;
top: -30px;
}
<div class="table">
<div class="row">
<div class="cell header">Team</div>
<div class="cell header">Wins</div>
<div class="cell header">Losses</div>
<div class="cell header">Pct</div>
</div>
<div class="row">
<div class="cell">Bulls</div>
<div class="cell">29</div>
<div class="cell">18</div>
<div class="cell">.617</div>
</div>
<div class="row">
<div class="cell">Pacers</div>
<div class="cell">28</div>
<div class="cell">19</div>
<div class="cell">.596</div>
</div>
<div class="row">
<div class="cell">Bucks</div>
<div class="cell">25</div>
<div class="cell">21</div>
<div class="cell">.617</div>
</div>
</div>