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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16961021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:09:35  来源:igfitidea点击:

How to get span to take up the full height of the containing td

htmlcss

提问by Matt Roberts

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>

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

该表的内边距为 15px,因此对于指示器 col,我删除了内边距,并将跨度设置为高度:100%:

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

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

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

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-bottomof the throws if I do that).

我该怎么做呢?请注意,我不能设置对TD代替跨度的造型,因为会与该渲染(它抵消了其他问题border-bottom的的th行,如果我这样做)。

采纳答案by Jaay

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>

回答by Ms. Nobody

You don't need the <span>there. All you need is to set the rightand leftpaddingto 0 so your colored row indicator is only 5 pixels wide as u wanted and leave the top and bottom paddings 15 as in the other cells so the background color covers the whole height of cell/row.

你不需要<span>那里。所有你需要的是设置正确的padding为0,这样你的有色行标志仅宽5像素为u想离开顶部和底部的垫衬15如在其他细胞,使背景色彩包括:细胞/行的整个高度.

HTML

HTML

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

CSS

CSS

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

Demo: http://jsfiddle.net/mNjsb/34/

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

回答by Alex Fang

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

This will work.

这将起作用。

回答by J.BizMai

I had the same problem. I tried various options.

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

I found a real solution here. It′s a trick but it REALLY Works.

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

table td{
    position: relative;
}

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

回答by ElPedro

Maybe I am missing something here but if you are just using the span element to provide the colour for the cell why not just set the background colour of the cell to pink?

也许我在这里遗漏了一些东西,但如果您只是使用 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>

回答by Ganesh Bora

span is inline element so to take full height you need to add display: block;or otherwise need to use block level element <div>

span 是内联元素,因此要采用全高,您需要添加display: block;或以其他方式使用块级元素<div>

回答by Shadow Wizard is Ear For You

For some odd reason adding the padding to the table cell cause the 100% height to "break".

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

Way around this is to add "dummy height" to the table cells:

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

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

This of course in addition to using block element:

这当然除了使用块元素:

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

Live test case.

现场测试用例

回答by skzryzg

What you're doing isn't correct. It's not considered a best practice to add elements solely for styling purposes, especially when those elements are empty. consider removing the first td and doing this instead:

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

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

here's a jsfiddle: http://jsfiddle.net/mNjsb/16/

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

edit: but if you insist on doing this, span is an inline element. that means you need to add

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

display: inline-block

if you want to style it with height and whatnot

如果你想用高度和诸如此类的东西来设计它