Отображать содержимое за пределами таблицы

Question

Я пытаюсь пронумеровать все строки пользовательской таблицы div, отображающей номера вне контента, как вы можете видеть на изображении, показанном ниже. Но я понятия не имею, как с помощью css, если кто-то может помочь мне с яркой идеей. Я пробовал использовать: раньше и добавляю контент, но я не знаю, почему он не работает: |

This is a small fiddle with my div table .

Answer 1

Для этого вы можете использовать счетчики css.

их отображения в псевдо-элемента на ряду:

.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>

Answer 2

Вот пример:

.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/