如何获得跨度占据包含td的全部高度

Question

我有一个表,在左栏中我想为行添加一个指标.我正在使用跨度来渲染指示器,但我无法获得跨度来占据整个高度:

<table>
    <tr>
        <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;">&nbsp;</span></td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

该表的填充为15px,因此对于指示器col,我删除了填充,并将跨度设置为高度:100%:

td {padding:15px;}
table {background-color: yellow;}

这个小提琴显示它当前正在运行 - 粉红条需要跨越包含td的整个高度.

我该怎么做呢？请注意,我不能设置对TD代替跨度的造型,因为会与该渲染(它抵消了其他问题border-bottom的的th行,如果我这样做).

Answer 1

应该添加溢出:自动到跨度(并显示:当然阻止)

<table>
   <tr>
      <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;display:block;overflow:auto">&nbsp;</span></td>
      <td>Some content</td>
      <td>Some more content</td>
  </tr>
</table>