如何使 HTML 表格列尽可能紧密地挤压？（或者，尽可能地增长？）答案

【问题标题】：How do I make an HTML table column squish as tightly as possible? (Or, grow as much as possible?)如何使 HTML 表格列尽可能紧密地挤压？（或者，尽可能地增长？）
【发布时间】：2010-10-17 11:47:13
【问题描述】：

我有一张这样的桌子：

<table border=1 style="width: 100%">
 <tbody>
    <tr>
      <td>
        squish this one
      </td>
      <td>
        expand this one
      </td>
    </tr>
  </tbody>
</table>

我希望左栏尽可能窄，右栏占据屏幕的其余部分。这可能吗？

【问题讨论】：

您打算使用 CSS 还是在 HTML 中内联定义样式？

标签： html css

【解决方案1】：

<table border=1 style="width: 100%">
<tbody>
    <tr>
      <td width="1">
        squish this one
      </td>
      <td width="*">
        expand this one
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

这是正确的观点，但浏览器通常不支持“n*”宽度。由于父表的全宽和左侧的最小宽度相结合，该示例仍然有效，这通常是最好的方法。
(%-width 通常适用于浏览器，但根据规范并不完全正确 — 100% 列加上固定宽度的左侧宽度将加起来超过父大小的 100% .)

【解决方案2】：

“尽可能窄”是零宽度或一个像素。您可以使用 width=0 或 1px 来实现。你的意思是不同的吗？

【讨论】：

“尽可能窄”尽可能窄，同时仍有空间容纳列中的所有内容。

【解决方案3】：

第二列style="width:100%"也一样。

【讨论】：

怎么样？表格列不使用宽度