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
How to get span to take up the full height of the containing td
提问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;"> </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"> </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"> </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;
}
回答by Alex Fang
span{
display: inline-block;
margin: 0;
}
This will work.
这将起作用。
回答by J.BizMai
回答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"> </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;"> </div>
回答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
如果你想用高度和诸如此类的东西来设计它
