burebistaruler burebistaruler - 4 months ago 13
CSS Question

Display content outside of table

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

enter image description here

This is a small fiddle with my div table .

Answer

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>