显示表格外的内容

Question

我正在尝试对自定义div表的所有行进行编号，这些行显示内容之外的数字，如何在下面显示的图像上看到。 但我不知道如何使用CSS，如果有人可以帮助我有明智的想法。 我尝试过使用：之前和添加内容但我不知道为什么不工作：|

This is a small fiddle with my div table .

Answer 1

以下是一个例子：

.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

您可以使用css计数器。

在行上的伪元素中显示它们：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;