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

Question

在这里解释需要并不容易，但这里是解决问题的方法。

Playground

要求：

• 第一个单元格具有固定宽度
• 中间单元格宽度占用剩余空间
• 最后一个单元格的宽度取决于它的子宽度

问题：

中间单元如何占用行的其余部分，而不是由于孩子的宽度更大而被“接管”？

---

这是我的问题的简化版本，使用真实表而不是CSS表）

Answer 1

如果没有特定的标记，很难提出一个确切的解决方案，但这里有一些事情需要考虑。

1. 通过设置宽度，可以轻松处理最左边的固定宽度单元格。例如width: 100px。 （这个单元格与问题无关;从某种意义上说，它可以被忽略。）
2. 如果我正确解释，您希望阻止最右边的单元格进行包装。根据内容的不同，这很容易或很难。对于纯文本，可以使用white-space: nowrap来实现。如果内容不是严格的文本，也许你可以强迫它像文本一样，例如display: inline。
3. 对于中间单元格，您没有指定您想要对多余内容进行的操作。把它藏起来？添加水平滚动条？您也没有说明这些内容是什么。但是，您很可能希望将overflow-x属性设置为某个合适的值。

Answer 2

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