2

I'm displaying some tabular data, using <table>, as I've implemented in this jsfiddle:

I omitted the JS part since it's not important here. I will be wiring it up such that clicking on any row would expand a sort of panel for that row (there would be only 1 panel visible at a time).

The image shows exactly how I'd like the panel to appear. I need the panel to be a container that takes up the entire width of the element that contains the table (this element is wider than the table). In addition, it's important to keep it such that the left-most table column takes on the width of its widest value, as is currently the case.

Does anyone know a straight forward trick to achieve this?

Ideally, this would involve only css and html; i.e. without having to measure some elements and set css props of others using JS (of course JS would be used to add classes and dom nodes, but I don't need that bit included in the solution).

Panel http://two-n.com/img/stackoverflow_entities.png

Notes:

This is the closest I've gotten. It uses an absolutely positioned <div> inside a <tr>. The main drawback is that it DOES require using JS to measure the panel's <div> height and to apply that height to the <tr>. It also feels like a hack to stick an absolutely positioned <div> inside a <tr>, although it appears to work fine in Chrome and FF (haven't tried IE yet).

In this fiddle, I tried to create <tr> with a <td> with colspan="3" to make the panel. It's insufficient, because it affects the width of the left-most column and because it doesn't allow the panel background color to extend outside of the table, to the container's edges. Maybe there's a way to take this further and make it work?

I tried to see if by breaking up the <tbody> into two <tbody>'s (split at the <tr> of the selected row) I could insert the panel between them, but couldn't make it work.

I could switch from using <table> to using the appropriate css display props to render this table –– if that would make it possible to render the panel as needed. Again, not sure how.

Target browsers are Chrome, FF, and hopefully IE9

Community
  • 1
  • 1
meetamit
  • 24,727
  • 9
  • 57
  • 68
  • Show what you tried to solve the problem (the best code so far and how it fails). There’s no apparent reason for a new `tbody`, but there *is* need for a new `td`, with `colspan` set to the total number of columns. – Jukka K. Korpela Dec 30 '13 at 08:36
  • @JukkaK.Korpela I tried that. [Here's how it looks](http://jsfiddle.net/meetamit/5k6sY/4/). It doesn't work because it affects the width of the left-most column and because it doesn't allow the panel background color to extend outside of the table, to the container's edges. – meetamit Dec 30 '13 at 08:54
  • Maybe try setting every column width eg. tr td {width:200px;} http://jsfiddle.net/5k6sY/5/ – tilda Dec 30 '13 at 09:03
  • Check this [fiddle](http://jsfiddle.net/surjithctly/5k6sY/8/), Is that what you are looking for? – Surjith S M Dec 30 '13 at 10:36
  • @SurjithSM At first your solution looked promising, but it doesn't work when the [labels get longer](http://jsfiddle.net/meetamit/5k6sY/9/) because it forces the right-most column to remain at 50%. – meetamit Dec 30 '13 at 21:05

1 Answers1

0

You could use flexbox instead of a table, here is a conversation about flexbox vs table: flexbox vs tables, why do we need flexbox? to get you more in the subject. And here flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ So you could let the last "column" flex all the way to the end of the parent container, as you want it to.

Community
  • 1
  • 1
  • Thanks. Flexbox is interesting, but its current browser support is a non starter for us. Beyond that, I don't actually see a way in which flexbox can achieve exactly what I'm after, specifically because I still need the left-most column to grow/shrink based on the width of the longest label –– like a classic non-sized table column. – meetamit Dec 30 '13 at 20:54