1

I need to build a list of people with basic informations on a table, like name, and when one clicks the row it will expend details between the clicked row and the next one.

For a more visual example see jExpand jQuery plug-in which does exactly that, but on a regular html table.

Here is a jsfiddle with the code

My goal is when I click on Alice's name a new div is created between Alice and Bernard.

This new div must be of the width of the table. And this is the big deal. No colspan in css table.

I'm thinking of a place holder dummy row with a second absolute div on top but can't really figure any elegant way to do it.

Alexandre
  • 919
  • 1
  • 9
  • 13
  • Maybe some javascript code which you use? Or http://jsfiddle.net link? – Beniamin Oct 27 '11 at 12:31
  • Just wondering, why arent you using a table? – Richard Dalton Oct 27 '11 at 12:34
  • Yhea forgot to mention that. I gave you the light version here. But obviously I have a lot more things in it and it's not a table in the sense of "tabular display of data". For instance on each line I have a navigation pan and some status informations. I could use a table in the absolute, but since it will be only for the row expending things, other solutions are most welcome. – Alexandre Oct 27 '11 at 12:42
  • @AlexandreRavey I'm not sure it's even possible. But good luck finding an answer. I would just give up and use tables :D – Richard Dalton Oct 28 '11 at 09:41
  • @RichardD Challenge accepted! :) – Alexandre Oct 28 '11 at 13:11

3 Answers3

0

Something like this? http://jsfiddle.net/95aZb/

Johan
  • 35,120
  • 54
  • 178
  • 293
  • More like the opposite. Exactly like that: http://www.jankoatwarpspeed.com/examples/expandable-rows/ – Alexandre Oct 27 '11 at 13:10
  • Here is a jsfiddle of what I want to do: http://jsfiddle.net/RMkav/2/ You'll see the problem by clicking on Alice. – Alexandre Oct 27 '11 at 13:26
0

Finally came up with something not so elegant but working.

See this jsFiddle (Use the "load details" button and then click on a row)

Still have some draw backs thought, like the impossibility to use jQuery's slideToggle() instead of toggle(). If anybody have a solution sliding an element with an absolutely positioned child, let me know.

I hope it will help somebody else :)

Alexandre
  • 919
  • 1
  • 9
  • 13
  • Congrats on the solution. When you are able, please make sure to mark your answer as 'accepted' so that others might learn from you success. Cheers~ – Andrew Kozak Dec 21 '11 at 18:38
0

This is the third "css div table" question I've come across today. The answer is "use a table".

creating the same thing with divs as tables

how to create this css?

Community
  • 1
  • 1
Curtis
  • 101,612
  • 66
  • 270
  • 352
  • And I agree with you in that a table is made for tabular data and div may not be used everywhere just to use div instead of a table. This is really not a simple table with only 4 columns, lots of other things are keeping me from going real table. But even after having found a solution (see my answer) I consider going table, lots of other problem to solve before thought. – Alexandre Oct 28 '11 at 13:36