Complex table, different cells' widths requirements

Question

It's not easy explaining the need here, but here is the playground for the problem.

Playground

Requirements:

• First cell has FIXED width
• Middle cell width takes the rest of the space
• Last cell's width depends on it's children's width

The Question:

How can the middle cell take the rest of the row's space,
without being "taken over" by it's child's greater width?

---

this is a simplified version of my problem, using real tables instead of CSS tables)

Answer 1

Solution playground

HTML

<table>
  <tr>
    <td></td>
    <td>
      <div>
        <div></div>
      </div>
    </td>
    <td>
      <b></b>
      <b></b>
      <b></b>
    </td>
  </tr>
</table>

CSS

table{ width:100%; }

/* 
This is the trick. There is a wrapping DIV with a position:relative which
holds the actual content DIV which is positioned Absolute, so it's width won't
affect it's own cell width's
*/
td > div{ position:relative; width:100%; height:20px; }
div div{ 
  position:absolute;
  background:green; height:100%; width:800px; 
}


/* First TD has FIXED width */
td:nth-child(1){ width:100px; background:#EEE; }

/* Middle TD width takes the rest of the space */
td:nth-child(2){ overflow:hidden;  }

/* Last TD has width depends on it's children's width */
td:nth-child(3){ white-space:nowrap; width:1%; }

Answer 2

Without specific markup, it's hard to propose an exact solution, but here are some things to consider.

1. The left-most fixed-width cell is easily handled by setting its width. e.g. width: 100px. (This cell isn't really relevant to the problem; in a sense it can be ignored.)
2. If I'm interpreting correctly, you want to prevent the right-most cell from wrapping. That's easy or hard, depending on the content. For pure text, it can be achieved with white-space: nowrap. If the content isn't strictly text, perhaps you can coerce it into acting like text, e.g. display: inline.
3. For the middle cell, you don't specify what you want to happen to the excess content. Hide it? Add a horizontal scroll bar? You also don't indicate what this content is. But most likely you'll want to set the overflow-x property to some suitable value.