表列組寬度

Question

假設我有一個表象下面這樣：

|<--      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 |      | 
-------------------------------------------------------------------- 

如何將樣式它使得每個列組具有固定的寬度，但各組下的各個列自動調整像這樣：

1. 標籤列調整到以顯示該列文本所需的最小寬度不包裹
2. 輸入列擴展以填充左爲組寬度減去標籤列寬的空間。

實施例：

|<--      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解決方案。雖然我還應該提到標籤/輸入行可以動態添加，並且列需要適當調整（所以我不能只在初始文檔加載時設置固定寬度）。

如果這也可以改變，以便不再需要一個表，更好。

Answer 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); 

Answer 2

使用此demo

.col1{ 
    table-layout: fixed; 
} 
.col2{ 
    table-layout: fixed; 
} 
.col1 td{ 
    width: 200px; 
} 
.col2 td{ 
    width: 200px; 
} 

看到這個updated demo。