固定大小的列答案

【问题标题】：Fixed-size columns固定大小的列
【发布时间】：2011-05-03 23:59:12
【问题描述】：

我有一个 jQuery 插件，可以创建、填充和格式化表格。我已经有了创建和填充的权利，但格式仍然让我望而却步。

表格总是 800 像素宽（为了让我的生活更简单，我以这种方式设计了我的网站；我是一个多半是左脑的人，音乐是我唯一能理解和创作的艺术），但数字列的数量及其各自的属性（标题、宽度、对齐方式）是可变的：

$
.grid('MostSoldBySales', 'Most sold products by total sales', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Sales'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
.grid('MostSoldByWeight', 'Most sold products by total weight', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Weight'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
;

我的主要问题与列宽有关：我迫切需要一种方法来使我的列与指定的一样宽。我不希望浏览器出于任何原因调整列的大小。我认为这甚至是 Visual Basic 提供的功能。如何使用 CSS 做到这一点？

【问题讨论】：

@mu 太短：不幸的是，没有。我想分享，但是这段代码是为别人写的，不是免费软件。
@mu 太短：它是一个 Intranet 应用程序。

标签： html css tabular

【解决方案1】：

我知道的一种可靠方法是将 DIV 放入每个 TD 中。您为 TD 指定的宽度仅作为建议（即使在现代浏览器中），如果窗口太窄，列将被压扁。所以这将始终是 200px 宽：

<table>
  <tr>
    <td>
      <div style="width:200">Some stuff</div>
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以尝试使用'min-width': '120px'

【讨论】：

【解决方案3】：

虽然不太实用，但您可以尝试将宽度用双引号括起来并像这样添加 !important

{css: {'text-align': 'left',  width: "360px !important"      }, children: 'Comments'}

【讨论】：

【解决方案4】：

我认为您的问题是您给浏览器提供了冲突的尺寸。你说<table> 元素设置为 800px 宽，但你的三列加起来只有 640px。您将需要在某处添加另一个 160 像素。对于其他列集，您必须确保列宽总和为 800 像素。

您可以尝试在您的<table> 上使用table-layout: fixed。这应该会强制解决问题并停止您可能在表格及其单元格之间获得的任何反馈。

【讨论】：

即使列宽加起来为 800 像素，个别宽度也会失真。
@Eduardo：你有任何边界或类似的东西吗？还有table-layout: fixed（请参阅我的更新以获取链接）。
@mu 太短：我的表格没有任何边框，但它的单元格确实有左右填充。在设置列大小时，我会考虑这些填充，但即便如此，列的大小也不正确。
@Eduardo：还涉及哪些其他 CSS？在添加新的内边距、边距、边框、.. 设置之前，您是否将所有属性重置为零？在没有看到 HTML 和 CSS 的情况下，我们只能猜测正在发生的事情，而且我们无能为力。
我已将所有内容设置为零，但左右填充设置为 5px。