如何获取跨度占据包含td的完整高度 [英] How to get span to take up the full height of the containing td

问题描述

我有一个表，在左侧列中，我想为该行添加一个指标。我使用一个跨度来渲染指标，但我不能得到跨度来占据完整的高度：

I have a table, and in the left column I want to add an indicator for the row. I'm using a span to render the indicator, but I can't get the span to take up the full height:

<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我删除填充，并设置span to height：100％：

The table has a padding of 15px, so for the indicator col I remove the padding, and set the span to height:100%:

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

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

This fiddle shows it currently running - that pink bar needs to span the whole height of the containing td.

我如何做到这一点？注意，我不能在td而不是跨度上设置样式，因为这会导致渲染的其他问题（它抵消了<$ c $的 border-bottom

How do I do this? Note that I can't set the styling on the td instead of the span because that causes other issues with the rendering (it offsets the border-bottom of the th rows if I do that).

推荐答案

应该添加overflow：auto到span （和显示：块当然）

Should add overflow:auto to the span (and display:block of course)

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

这篇关于如何获取跨度占据包含td的完整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！