1

我有一个创建、填充和格式化表格的 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 做到这一点？

4

4 回答 4

3

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

<table>
  <tr>
    <td>
      <div style="width:200">Some stuff</div>
    </td>
  </tr>
</table>
于 2011-05-04T00:09:41.860 回答
2

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

于 2011-05-04T00:06:08.123 回答
2

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

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

于 2011-05-04T00:09:42.587 回答
2

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

{css: {'text-align': 'left',  width: "360px !important"      }, children: 'Comments'}
于 2011-05-04T00:11:29.827 回答