使用 CSS 自动调整宽度内容

Question

我有一个有两列的表。第二列应始终完美地显示其内容，并且应根据内容自动计算宽度。第一列应尽可能宽到某个点（最大宽度）。不幸的是，我只习惯 WPF 而不是 HTML。在 WPF 中，我会写以下内容：

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="*" MaxWidth="600" />
   <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

我的 HTML 是：

<colgroup>
   <col class="fullWidthCol" />
   <col class="autoWidthCol" />
</colgroup>

我的 CSS 是：

.fullWidthCol {
   width: 100%;
   max-width: 600px;
}

.autoWidthCol {
   overflow: auto;
}

我确定我什至没有接近。它忽略了我的最大宽度并尽可能大地调整第一列，将第二列推到屏幕右侧。

Answer 1

看起来td 不接受max-width 规范。只需改用width；在td 上，width 会产生同样的效果。

例子：

table
{ width: 100%; }

.fullWidthCol
{ width: 300px; }

<table border="1">
  <tr>
    <td class="fullWidthCol">The first column should be as wide as possible up to a certain point (max width). </td>
    <td class="autoWidthCol">The second column should ALWAYS show it's content perfectly and the width should be automatically calculated based on the content. </td>
  </tr>  
</table>

或查看http://jsfiddle.net/HdSA2/。