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

This fiddle显示当前正在运行 - 粉红条需要跨越包含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>

Answer 2

您不需要<span>。您只需将右侧和左侧 padding设置为0，这样您的彩色行指示器只需要5个像素宽，并且可以保留顶部和底部paddings 15与其他单元格一样，因此背景颜色覆盖单元格/行的整个高度。

<强> HTML

  <table>
    <tr>
        <td class="rowindicator">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

<强> CSS

    table{background: yellow;}
    td{padding:15px;}
    .rowindicator{
         width:5px;                       
         padding-right:0px;  
         padding-left:0px;                       
         background-color:pink;
    }

演示：http://jsfiddle.net/mNjsb/34/

Answer 3

也许我在这里遗漏了一些东西，但如果你只是使用span元素为细胞提供颜色，为什么不把细胞的背景颜色设置为粉红色？

<html>
<head>
<style>
td {padding:15px;}
table {background-color: yellow;}
</style>
</head>
<body>
<table>
    <tr>
        <td style="padding:0px;width:5px; background-color:pink">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>
</body>
</html>

Answer 4

span{
    display: inline-block;
    margin: 0;
}

这样可行。

Answer 5

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

这是为了向表格单元格添加“虚拟高度”：

td {padding:15px; height: 5px;}

这当然除了使用块元素：

<div style="height:100%; width:5px; background-color:pink;">&nbsp;</div>

Live test case

Answer 6

你所做的不正确。仅为样式目的添加元素并不是最佳实践，尤其是当这些元素为空时。考虑删除第一个td并改为：

td:first-child{
    border-left:4px solid pink
}

这是一个jsfiddle：http://jsfiddle.net/mNjsb/16/

编辑：但是如果你坚持这样做，span就是一个内联元素。这意味着您需要添加

display: inline-block

如果你想用高度和其他

来设计它

Answer 7

span是内联元素，因此要获取全高度，您需要添加display: block;或者需要使用块级元素<div>

Answer 8

我遇到了同样的问题。我尝试了各种选择。

我找到了一个真正的解决方案here。这是一个技巧但它真的有用。

table td{
    position: relative;
}

table td span{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

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

8 个答案: