rowspan not working with <td>

Please look at http://jsfiddle.net/955u4jLs/.

Can someone please tell me why rowspan is not working? Thanks.
elepilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Snarf0001Commented:
Because of your "display:inline-block" style on the td.
rowspan is only applicable to a td element with it's default of display:table-cell
0
elepilAuthor Commented:
Snarf0001, thank you for responding.

You're right, removing the inline-block restored the rowspan feature. But if I may pick your brain further.

I used to have a <div> inside the <td> cell but came across an IE browser bug. That post is still open actually  (http://www.experts-exchange.com/questions/28691481/jQuery-Having-difficulty-setting-a-child-div-'s-height-to-match-it's-parent-td-for-Microsoft-Internet-Explorer-ONLY.html).

So I thought I'd do away with the <div>, but now I have to size the <td> cells. If I don't use inline-block, I can't change the <td>'s dimensions. So if I need to be able to size the <td> cells, and I can't really alter its display property, do you have any suggestions on how I can approach this?
0
Snarf0001Commented:
Yep, might actually be a fair bit easier than you're thinking.  Without the inline-block, you can still control the sizing, just slightly differently.
With a td with standard display:table-cell, it WILL automatically grow as content increases, despite what you specify for "height".  So in effect, "height" actually functions as "min-height" in that case.

Replace your td style with:
    td {
        border: 1px solid #CCC;
        width: 250px;
        height: 90px;
        background-color: lightgreen;
    }

Open in new window


And that should do the trick.  And much easier on markup than having all of the divs from the other question.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Snarf0001Commented:
As for the other question, and why IE is acting like that, I'll side with Julian.  
Who the hell knows...
0
elepilAuthor Commented:
Snarf0001, that IE problem has been driving me BATTY! The basic operation I'm doing there is just adjusting the <div> child's height to match it's parent <td> height. But at some point, IE starts generating pixels on its own. In that other problem, it starts doing this only when it reaches the 1:00pm-2:00pm <div>. I also can't adjust the <td> height back to its initial height at that point, giving me the impression IE thinks there's "stuff" in the cell that I can't see. I mean, I already took out the padding, border, and margins. What more can I do? If IE still thinks there's something inside the <td> and won't let me resize it smaller ... I hate IE, it really threw a monkey wrench into my project. Now I'm scrambling for alternatives.
0
Snarf0001Commented:
Did you read the comment before my last one?  That should fix it in all browsers (based on the fiddle in this post).
If not, what's still going wrong?
0
elepilAuthor Commented:
Thanks for your help, Snarf. I think I will modify my application to do away with the <div> and rely on the <td> as the container of appointments content.
0
elepilAuthor Commented:
Oh my gosh, Snarf! Was the accepted solution for this post meant for the other post which I had provided you a URL for? Because it fixed it! You're a genius!!

The result isn't perfect though, stupid IE, but it sure was a heck of a lot better than it was before! Thanks!
0
Snarf0001Commented:
Wow... nope, it was meant for this one, I just "fiddled" with the non-div container version you had in this post.
Never even bothered with the other one, since it's a lot easier without the divs inside the td elements.

But fantastic if it worked on the other fiddle too!

Everytime I get annoyed to no end at IE, I just think that gratefully the days are gone that we had to support IE6...
0
elepilAuthor Commented:
Haha, IE6. Lucky you didn't have to support IE1.

Yes, your little fix here worked in the other and made IE behave! The <div>s overflowed a little at the bottom, but all of them expanded to the full heights of their parent <td>s! Amazing, all it takes is the addition of a height on the td selector and everything fell in place! Let's call it serendipity then :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.