CODEWITHSUNDEEP
htmlcss
Mary Rose Geronimo Tabac
Mary Rose Geronimo Tabac

Reputation: 1

How to overlap table rows?

Is it possible to make the table rows to overlap each other, using only css and html?

Please help. The page is here, when the user choose conditional leave, they will prompt with different additional field(s) to fill up. But I just want to know if rows can be set to overlap so the table will not be too long.

http://www.tritech.com.sg/consultants/intranet/leave_application/leave_form/index.php

Upvotes: 0

Views: 8203

Answers (1)

Dpolehonski
Dpolehonski

Reputation: 958

Yes, it it possible using CSS and HTML to allow elements to overlap, and there are many techniques to do this, however in doing so you will cause the content of those rows to overlap. Unless you actually want to hide you content its not a good space saving technique. It would be better to reduce padding in the rows, and or cells.

Having said that..

tr
{
    display:block;
    position:absolute;
    height:15px;
    top:0px;
}

You need to set position to block to stop them acting like table rows, then position either relative or absolute depending on how you need to control them. then set the new top values to match. This style will align all table rows to the top of the table.. Important to note that the cells within the table will no longer be constrained to the element, this means they'll jump out of the table so will have to be hidden using overflow:hidden;

I hope this awnsers your question, but I would urge you to consider a better option than this. If you don't need the content to be displayed setting the elements display:none; Has a better effect and is easier to toggle either inline or as a class.

P.S would be a better example If I had sample code to use.

Upvotes: 3

Related Questions