固定大小的列
我有一个 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 来做到这一点？
I have a jQuery plugin that creates, fills and formats tables. I already have the creating and the filling right, but the formatting still eludes me.
The tables are always 800px wide (to make my life simple, I designed my Web site that way; I am a mostly left-brained guy, music being the only kind of art I can understand and produce), but the number of columns and their individual properties (title, width, alignment) are variable:
$
.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'}
])
;
My main problem is related to the column widths: I desperately need a way to make my columns exactly as wide as specified. I don't want the browser to resize the columns for any reason. I think that is a feature even Visual Basic provided. How do I do that using CSS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我知道的一种可靠的方法是将 DIV 放入每个 TD 中。您为 TD 指定的宽度仅作为建议（即使在现代浏览器中也是如此），如果窗口太窄，列将被挤压。所以这将始终是严格的 200px 宽：
One sure-fire way I know is to put DIVs inside each TD. The width you specify for a TD is only taken as a suggestion (even in modern browsers), and the columns will squash down if the window's too narrow. So this will always be rigidly 200px wide:
您可以尝试使用
'min-width': '120px'You can try using
'min-width': '120px'虽然不太实用，但您可以尝试将宽度用双引号括起来并添加 !important ，如下所示
Though not really practical, you could try wrapping the width in double quotes and adding !important to it like so
我认为你的问题是你给浏览器提供了冲突的尺寸。您说
元素设置为 800px 宽，但您的三列加起来只有 640px。您需要在某处再添加 160px。对于其他列集，您必须确保列宽总和为 800 像素。您可以尝试使用
table-layout: 固定在您的上。这应该会强制解决该问题并阻止您在表格及其单元格之间可能收到的任何反馈。I think your problem is that you're giving the browser conflicting dimensions. You say that the
<table>elements are set at 800px wide but your three columns only add up to 640px. You're going to need to add another 160px somewhere. With other column sets you'll have to make sure the column widths sum to 800px.You can try using
table-layout: fixedon your<table>. That should force the issue and stop any feedback you might be getting between the table and its cells.