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/。

使用CSS自动调整宽度内容

1 个答案: