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

Question

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%:

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

This fiddle shows it currently running - that pink bar needs to span the whole height of the containing 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-bottom of the th rows if I do that).

Use block element like `
` or add `display: block;` to the span style. Otherwise it will ignore any attempt to define its dimensions being inline element. — Shadow The GPT Wizard, Jun 06 '13 at 11:33
I changed the span to a div and it's much the same... Do I need to do anything else? — Matt Roberts, Jun 06 '13 at 11:35
Check my answer: http://stackoverflow.com/a/16961534/2296407 I think the main problem is just to leave the padding for all set 15 and just reduce it on left and right in the row indicator. — Ms. Nobody, Jun 06 '13 at 12:02

score 19 · Accepted Answer · answered Jun 06 '13 at 11:39

19

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>

answered Jun 06 '13 at 11:39

Jaay

2,103
1
16
34

Nice, can you explain why adding it makes such difference? – Shadow The GPT Wizard Jun 06 '13 at 11:40
http://jsfiddle.net/uKu3R/1/ I think he wanted the cell padding 15px in the text cells and the span to be full height not with padding. – Ms. Nobody Jun 06 '13 at 11:46
@Ms.Nobody I think this is pretty much the same (or may I missed something). I'm trying to figure out why does this work, this is a really good question – Jaay Jun 06 '13 at 11:49
1

@Jaay I just put your solution in fiddle with the td padding so u can see that it's not actually working with that... :( and yeah good question.. I'm trying to figure it out too :D – Ms. Nobody Jun 06 '13 at 11:50
Great! While some of the other suggestions are very valid (no need for the span), I have to use the span, and this does the trick for me! – Matt Roberts Jun 06 '13 at 13:46
overflow:auto is the unexpected secret to solve this. – Amr Elgarhy Feb 06 '17 at 22:10
6

It might have worked in the past, but it doesn't work as expected if another cell is larger: https://jsfiddle.net/Metoule/4ar1pyhj/ – Métoule May 07 '20 at 14:08

Ms. Nobody · Answer 2 · 2013-06-06T12:49:19.540

3

You don't need the <span> there. All you need is to set the right and left padding to 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.

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

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

edited Jun 06 '13 at 12:49

answered Jun 06 '13 at 11:59

Ms. Nobody

1,219
3
14
34

You don't need display:block... will work fine without it, also, you can just as well set padding to 0 since all the cells will scale to the same height, it is a table after all! – Marc Audet Jun 06 '13 at 12:12
@MarcAudet I think he wants the padding 15. And to have the whole row indicator heigh u have to let the padding top and bottom be there. As u can see here: http://jsfiddle.net/mNjsb/31/ the padding:0 aint good if he wants it like this.. so.. I think my solution is ok. And yes the block isnt necessary. I just like to include load of code :D – Ms. Nobody Jun 06 '13 at 12:16
What I meant was that for `.row`, you can simply set padding to 0 and it still works... http://jsfiddle.net/audetwebdesign/mNjsb/32/ – Marc Audet Jun 06 '13 at 12:19
I will update the code so we aren't misunderstood ok? @MarcAudet got any problems with my code now? if u have just read my previous comment once more ok?! :D – Ms. Nobody Jun 06 '13 at 12:20
No big deal, it works either way, just slightly more concise CSS. – Marc Audet Jun 06 '13 at 12:22
Just saw your other fiddle, something else is happening... let me think about it. Anyway, +1 :) – Marc Audet Jun 06 '13 at 12:26
While I like the answer, I'm using the `span` as a workaround for some limitations with the server-side control I'm using that renders the html (I can't set attributes of the td, so I stick something in it that I can set) – Matt Roberts Jun 06 '13 at 13:41
T_T *runs away and dies* How exactly u can't set attributes to td if u set them in the question? Or is it how they are set forever by someone else and u don't have access to that thing or what? I'm just wondering what are you actually doing and what code u can edit and which not and why... – Ms. Nobody Jun 06 '13 at 13:59
Well, I'm using a pretty limited control in which I can't set attributes of the container (the td) on a row-by-row basis but I can set the content of the container. I didn't mention in the question (to keep it succint) that I have a bunch of different indicator colors, so each row gets a span with a specific class that specifies a certain color. So, I need the span to exist so it can contain the row-specific information. Horrible workaround I know but it's either that or ditch the control. But hey, your answer was still good :) – Matt Roberts Jun 06 '13 at 14:39

score 2 · Answer 3 · answered Jun 06 '13 at 11:53

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?

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

score 1 · Answer 4 · answered Jun 08 '18 at 14:42

1

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

answered Jun 08 '18 at 14:42

J.BizMai

2,621
3
25
49

score 0 · Answer 5 · answered Jun 06 '13 at 11:39

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

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.

skzryzg · Answer 6 · 2013-06-06T11:57:51.190

0

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:first-child{
    border-left:4px solid pink
}

here's a 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

display: inline-block

if you want to style it with height and whatnot

edited Jun 06 '13 at 11:57

answered Jun 06 '13 at 11:51

skzryzg

1,020
8
25

It depends in part on what else might go along with the indicator bar, maybe an edit or link button? Think of a spreadsheet application... but the border-left works independently of the cell padding, so that is a good idea. – Marc Audet Jun 06 '13 at 12:05
@MarcAudet, yea it's possible @Matt would put something else in the leading td, and i shouldn't have assumed otherwise, but in my experience when people resort to ` ` in an otherwise empty element, it's because they're trying to force the html into doing something it wasn't intended to do. My thinking was that since Matt put place holder text in the other cells, why would the leading cell be different unless he intended it to stay with the whitespace char. – skzryzg Jun 06 '13 at 12:45
Fair enough, in the absence of more information, I would agree with your interpretation, the simpler mark-up/CSS is usually preferable. – Marc Audet Jun 06 '13 at 13:03
I hold my hands up - you're right, I don't need anything else in there, the is there to force the html to do something – Matt Roberts Jun 06 '13 at 13:35
hehe, i believe we've all been there :) html is often counter-intuitive, bordering on illogical sometimes. I hope I didn't come off as dickish. that wasn't my intent. – skzryzg Jun 06 '13 at 14:06

score 0 · Answer 7 · answered Jun 06 '13 at 12:21

0

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

answered Jun 06 '13 at 12:21

Ganesh Bora

1,133
9
17

score 0 · Answer 8 · answered Sep 17 '21 at 03:41

0

Quick and easy solution, just add the height in td's style, only actual measurement works, e.g 1px/1em, not working on 1%.

Some content Some more content

answered Sep 17 '21 at 03:41

Lam Kwok Shing

61
1
3

Alex Fang · Answer 9 · 2015-05-27T23:22:50.083

-1

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

This will work.

edited May 27 '15 at 23:22

answered May 27 '15 at 22:55

Alex Fang

95
1
2

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

9 Answers9

Linked