20

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

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

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

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

4

9 回答 9

18

应该将溢出：自动添加到跨度（当然还有显示：块）

<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>
于 2013-06-06T11:39:07.800 回答
3

你不需要<span>那里。您只需将右侧和左侧 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/

于 2013-06-06T11:59:06.050 回答
2

也许我在这里遗漏了一些东西，但是如果您只是使用 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>
于 2013-06-06T11:53:57.517 回答
1

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

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

table td{
    position: relative;
}

table td span{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
于 2018-06-08T14:42:17.497 回答
0

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

于 2013-06-06T12:21:56.000 回答
0

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

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

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

这当然除了使用块元素：

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

现场测试用例。

于 2013-06-06T11:39:17.293 回答
0

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

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

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

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

display: inline-block

如果你想用高度和其他东西来设计它

于 2013-06-06T11:51:57.287 回答
0 
span{
    display: inline-block;
    margin: 0;
}

这将起作用。

于 2015-05-27T22:55:09.143 回答
0

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

  一些内容 更多内容
于 2021-09-17T03:41:15.697 回答