如何让跨度占据包含 td 的全部高度答案

【问题标题】：How to get span to take up the full height of the containing td如何让跨度占据包含 td 的全部高度
【发布时间】：2013-06-02 09:33:35
【问题描述】：

我有一个表格，我想在左列中为该行添加一个指示器。我正在使用跨度来渲染指示器，但我无法让跨度占据整个高度：

<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，我删除了内边距，并将跨度设置为 height:100%：

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

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

我该怎么做？请注意，我不能在 td 而不是 span 上设置样式，因为这会导致渲染出现其他问题（如果我这样做，它会抵消 th 行的 border-bottom）。

【问题讨论】：

使用像<div>这样的块元素或将display: block;添加到span样式中。否则它将忽略任何将其尺寸定义为内联元素的尝试。
我把 span 改成了 div 还是一样的。。。我还需要做什么吗？
是的，看到了。正在寻找更准确的答案。
检查我的答案：stackoverflow.com/a/16961534/2296407 我认为主要问题是只保留所有第 15 组的填充，并在行指示器的左侧和右侧减少它。
显示：内联块对我有用

标签： html css

【解决方案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>

【讨论】：

很好，您能解释一下为什么添加它会产生如此大的不同吗？
jsfiddle.net/uKu3R/1 我认为他希望文本单元格中的单元格填充 15px 并且跨度为全高而不是填充。
@Ms.Nobody 我认为这几乎是一样的（或者我可能错过了什么）。我试图弄清楚为什么这会起作用，这是一个非常好的问题
@Jaay 我只是将您的解决方案与 td 填充放在一起，这样您就可以看到它实际上并没有与它一起工作...... :( 是的好问题......我正在努力解决这个问题也出来了：D
过去可能有用，但如果另一个单元格更大，它就无法按预期工作：jsfiddle.net/Metoule/4ar1pyhj

【解决方案2】：

那里不需要<span>。您只需将 right 和 left padding 设置为 0，以便您的彩色行指示器只有 5 个像素宽，并保留顶部和底部填充 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/

【讨论】：

你不需要 display:block... 没有它也可以正常工作，你也可以将 padding 设置为 0，因为所有单元格都将缩放到相同的高度，这是一个毕竟是桌子！
@MarcAudet 我认为他想要填充 15。并且要让整个行指示器高度，你必须让填充顶部和底部在那里。正如你在这里看到的那样：jsfiddle.net/mNjsb/31 padding:0 如果他想要这样的话就不好了.. 所以.. 我认为我的解决方案还可以。是的，该块不是必需的。我只是想包括代码负载：D
我的意思是，对于.row，你可以简单地将填充设置为0，它仍然可以工作......jsfiddle.net/audetwebdesign/mNjsb/32
我会更新代码以免我们被误解好吗？ @MarcAudet 现在我的代码有什么问题吗？如果你刚刚再读一次我之前的评论好吗？！ :D
没什么大不了的，无论哪种方式都可以，只是 CSS 稍微简洁一些。

【解决方案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>

【讨论】：

【解决方案4】：

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

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

table td{
    position: relative;
}

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

【讨论】：

【解决方案5】：

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

解决方法是在表格单元格中添加“虚拟高度”：

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

这当然除了使用块元素：

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

Live test case.

【讨论】：

【解决方案6】：

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

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

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

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

display: inline-block

如果你想用高度和其他东西来设置它的样式

【讨论】：

这部分取决于指示器栏可能还有什么，可能是编辑或链接按钮？想想一个电子表格应用程序......但左边框独立于单元格填充工作，所以这是个好主意。
@MarcAudet，是的，@Matt 可能会将其他内容放在领先的 td 中，我不应该假设其他内容，但根据我的经验，当人们在其他空元素中诉诸 &nbsp; 时，这是因为他们试图强迫 html 做一些它不打算做的事情。我的想法是，既然马特将占位符文本放在其他单元格中，那么除非他打算将其保留在空白字符中，否则为什么前导单元格会有所不同。
公平地说，在没有更多信息的情况下，我同意你的解释，更简单的标记/CSS 通常更可取。
我举手 - 你说得对，我不需要任何其他东西，是否有强制 html 做某事
呵呵，我相信我们都去过那里 :) html 通常是违反直觉的，有时甚至是不合逻辑的。我希望我没有表现得像个混蛋。那不是我的意图。

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

这会起作用。

【讨论】：

【解决方案9】：

快速简单的解决方案，只需添加td样式的高度，仅实际测量有效，例如1px / 1em，不适用于1％。

一些内容还有一些内容

【讨论】：