为其他单元格提供HTML表格单元格优先级

Question

我有一个非常简单的表：

<table cellspacing=0 cellpading=0 border=0>
  <tr>
     <td width="50%">Here is column 1</td>
     <td width="50%">Here is column 2</td>
  </tr>
</table>

有没有办法让第2列减少第1列之前的宽度？如果屏幕宽度减小，我希望第1列尽可能保持接近50％。但是，如果第2列没有进一步折叠的空间，则第1列可以缩小。

我不想将“white-space：nowrap”应用于第1列，应用固定的，或使用javascript。有没有CSS解决方案？

Answer 1

您必须为第一列指定特定（非百分比）宽度（可以根据初始窗口大小计算初始宽度）。

E.g。

<强> HTML

<table cellspacing="0" cellpading="0" border="0">
  <tr>
     <td>Here is column 1</td>
     <td>Here is column 2</td>
  </tr>
</table>

<强> CSS

table {
    font-size:40px
}

tr > td:first-child {
    width:280px;
}

<强>样本

http://jsfiddle.net/hyrvn/1/

尝试向右调整右下方的窗口。