如何在:: before伪元素之后得到缩进？

Question

我有一个表,我想使用带有计数器的CSS :: before伪元素将行号添加到td每行的第一行.我的问题是,如果第一个td包装第二行从数字开始,我希望它开始与它上面的文本内联.这可以用CSS完成吗？

例:

编辑

https://jsfiddle.net/3yL19zde/

HTML:

<table>
  <tr>
    <td>Some really long text that wraps to a second line...</td>
    <td>Some other column</td>
    <td>A third column</td>
  </tr>
  <tr>
    <td>Some really long text that wraps to a second line...</td>
    <td>Some other column</td>
    <td>A third column</td>
  </tr>
</table>

CSS:

table {
    width: 480px;
}

table td {
  vertical-align: text-top;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
    font-weight: bold;
}

Answer 1

我会在行的开头而不是在第一个单元格内部插入伪元素,以便它可以显示为独立的table-cell:

table {
  width: 500px;
}
tr {
  counter-increment: row;
}
tr::before {
  content: counter(row);
  display: table-cell;
  font-weight: bold;
}
tr::before, td {
  border: 1px dotted #888;
  padding: 5px;
}

<table>
  <tr>
    <td>Some really long text that wraps to a second line...</td>
    <td>Some other column</td>
    <td>A third column</td>
  </tr>
  <tr>
    <td>Some really long text that wraps to a second line...</td>
    <td>Some other column</td>
    <td>A third column</td>
  </tr>
</table>