Question

我有一个jQuery插件，可以创建，填充和格式化表格。我已经有了创作和填充权限，但格式化仍然无法实现。

这些表总是800px宽（为了让我的生活变得简单，我设计了我的网站;我是一个大多是左脑的人，音乐是我能理解和生产的唯一艺术品），但数字列和它们各自的属性（标题，宽度，对齐方式）是可变的：

$
.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做到这一点？

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

虽然不是很实用，但您可以尝试用双引号包装宽度并添加！重要的是这样

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

固定大小的列

4 个答案: