假设我有一个如下表:
|<-- Fixed width ->|
|<- group width ->|<- group width ->|
--------------------------------------------------------------------
| Label 1 | Input 1 | Label 2 | Input 2 | Filler (auto-expand) |
| Label 3 | Input 3 | Label 4 | Input 4 | |
| Section header (colspan=5) |
--------------------------------------------------------------------
| Label 5 | Input 5 | Label 6 | Input 6 | |
| Label 7 | Input 7 | Label 8 | Input 8 | |
--------------------------------------------------------------------
如何设置样式以使每个列组具有固定的宽度,但每个组下的各个列自动调整如下:
示例:
|<-- Fixed width ->|
|<- group width ->|<- group width ->|
--------------------------------------------------------------------
| Label 1 | Input 1 | Label 2 | Input 2 | Filler (auto-expand) |
| Label 3.. | Input 3 | Label 4 | Input 4 | |
| Section header (colspan=5) |
--------------------------------------------------------------------
| Label 5 | Input 5 | Label 6 | Input 6 | |
在上文中,包含标签1,3和5的标签列已调整到所有文本显示所需的最小宽度,而不会截断(标签3的宽度)。同时,相应的输入列已经调整,以使组宽保持不变。
我有一个结构的jsfiddle和初始的css here。
如果需要,可以随意调整结构,但我希望对它进行微小的更改。我希望只用html结构更改和css就可以实现这一点。
我也欢迎jquery解决方案。虽然我还应该提到标签/输入行可以动态添加,并且列需要适当调整(所以我不能只在初始文档加载时设置固定宽度)。
如果这也可以更改,以便不再需要表格,那就更好了。
答案 0 :(得分:1)
this您要找的是什么?如果是,请查看以下代码
// Assume you want widths 60, 90, 120 widths to each header
var widths = [60, 90, 120];
$('table td[colspan]').each(function (i, v) {
var th = $(this),
width = Math.floor(widths[i] / th.attr('colspan') * 1),
indStrt = 0;
th.width(widths[i]);
th.prevAll().each(function () {
var ind = $(this).attr('colspan');
indStrt += ind ? ind * 1 : 1;
});
var nextTr = th.closest('tr').next(),
tds = nextTr.find('td');
var $siblings = tds.eq(indStrt).nextUntil(tds.eq(indStrt + th.attr('colspan') * 1)).andSelf();
$siblings.each(function () {
$(this).width(width);
});
});
根据评论代码是
var COLUMN_GROUP_WIDTH=100;
var TABLE_WIDTH=$("#thetable").width();
// reset width so we can get proper column widths
$("#thetable").width("auto");
$('td.label').each(function (e, v) {
var labelWidth = $(v).width();
$(v).width(labelWidth);
console.log(labelWidth);
$(v).next().width(COLUMN_GROUP_WIDTH-labelWidth);
});
// so we can check total widths
//$(".header").css("display", "table-row");
$("#thetable").width(TABLE_WIDTH);
答案 1 :(得分:1)
对此demo
使用table-layout: fixed;
.col1{
table-layout: fixed;
}
.col2{
table-layout: fixed;
}
.col1 td{
width: 200px;
}
.col2 td{
width: 200px;
}
根据您评论的预期图片,查看此updated demo。