html - 使 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 列，应用 fixed with 或使用 javascript。有什么CSS解决方案吗？

Answer 1

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

例如

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/

尝试将右下角的窗口向右调整。