我有一个表，在左边的列中，我想为该行添加一个指示符。我正在使用一个跨度来呈现指示器，但我无法使该跨度占据整个高度:

<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 I删除填充，并将跨度设置为height:100%:

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

此fiddle显示它当前正在运行-该粉红色条需要跨越包含TD的整个高度。

我怎么做？请注意，我不能在td上而不是在span上设置样式，因为这会导致呈现的其他问题（如果我这样做，它会偏移行的数量）。

---

顺晟科技：

应该将Overflow：Auto添加到span（当然还有Display：Block)

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

我也有同样的问题。 我尝试了各种选项。

我在这里找到了一个真正的解决方案。这是一个技巧，但它确实有效。

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

快速简便的解决方案，只需加上TD式的高度，只有实际测量工作，如1px/1em，不能工作在1%。

一些内容 一些更多的内容

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

这将起作用。

你不需要那里。您只需要将右和左设置为0，这样您的彩色行指示器就像您想要的那样只有5个像素宽，并将顶部和底部的填充框保留为15，这样背景色就可以覆盖单元格/行的整个高度。

HTML

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

CSS

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

演示:http://jsfiddle.net/mnjsb/34/

你所做的是不正确的。仅仅为了样式目的添加元素并不被认为是最佳实践，尤其是当这些元素为空时。请考虑删除第一个td并改为执行以下操作:

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

以下是一个jsfiddle:http://jsfiddle.net/mnjsb/16/

edit:但是如果您坚持这样做，span是一个内联元素。这意味着您需要添加

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

如果您想用高度之类的样式

跨度是内联元素，因此要获得完整的高度，需要添加或使用块级元素

出于某种奇怪的原因，将填充添加到表格单元格中会导致100%高度“中断”。

解决这个问题的方法是向表格单元格添加“虚拟高度”:

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

当然，除了使用block元素之外，

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

实时测试用例.

也许我在这里遗漏了什么，但是如果您只是使用span元素为单元格提供颜色，为什么不直接将单元格的背景色设置为粉色呢？

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