Css 复杂表格，不同单元格的宽度要求

在这里解释这个需求并不容易，但这里是解决这个问题的平台

要求： 第一个单元格具有固定宽度 中间单元格宽度占据剩余空间 最后一个单元格的宽度取决于其子单元格的宽度 问题是： 中间的单元格如何占据行的其余空间，而不被其子单元格的较大宽度所占据

---

这是我的问题的一个简化版本，使用实表代替CSS表

没有特定的标记，很难提出确切的解决方案，但是这里有一些要考虑的事情。 最左边的固定宽度单元格可以通过设置其宽度轻松处理。e、 宽度：100px。这个单元与问题没有实际关系；从某种意义上说，它可以被忽略。 如果我的解释正确，您希望阻止最右边的单元格被包裹。这是容易还是难，取决于内容。对于纯文本，可以使用空白：nowrap实现。如果内容不是严格意义上的文本，您可能可以强制它像文本一样工作，例如display:inline。 对于中间单元格，您不指定要对多余内容执行的操作。把它藏起来？是否添加水平滚动条？您也没有指明此内容是什么。但是，您很可能希望将overflow-x属性设置为某个合适的值。 HTML

---

您希望如何处理“动态宽度”单元格的子项的组合宽度大于浏览器视口的情况？@StephenThomas-检查我的答案

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

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%; }