帶自動佈局的表格的最大寬度

Question

我有一個多列的表格，此表格不應超過一定的寬度和。

該表的列自動按表佈局自動調整大小：auto。

但是有時候這些列變得太大（文本不應該被打包，應該被裁剪）並且總和的寬度大於和。

在這種情況下，我希望'最大'的列變小，直到列的寬度不再超過和。

這意味着我不想通過某些因素縮小所有列，而是將更大的列「儘可能小」。

這可能通過一些簡單的JS甚至CSS？

這裏的示例：

我有3列和1000像素的一個最大總寬度Y。
這裏的列的內容的尺寸：

1：100像素2：1100px 3：1300px

這將導致與這些寬度的表：

1：100像素2：450像素3 ：450px;

這裏一些代碼：

HTML：

<div> 
    <table> 
     <tr> 
      <td>SomeText</td> 
      <td>SomeOtherTextSomeOtherTextSomeOtherText</td> 
      <td>SomeLongerTextSomeLongerTextSomeLongerTextSomeLongerTextSomeLongerText</td> 
     </tr> 
    </table> 
</div> 

CSS：

div { 
    border: 1px solid red; 
    width: 500px; 
} 

table { 
    table-layout: auto; 
    border: 1px solid grey; 
} 

td { 
    border: 1px solid black; 
} 

撥弄：http://jsfiddle.net/6zJR4/2/

在這個例子中該表比內含div更大。 我想要的是該表尊重包含div的寬度和列縮小。但並非所有的列都應該以相同的因子收縮，例如小30％。但是更大的列（也許所有列最終需要縮小）會縮小。

我的方法： 我想讓瀏覽器計算列的'理想'尺寸，然後用手調整尺寸（= JS）以匹配包含div的最大寬度。

我是多麼要計算不同列的寬度尚不清楚對我來說，我開了一個mathoverflow問題： https://math.stackexchange.com/questions/702067/how-to-find-a-set-of-ascending-natural-numbers-which-when-added-to-another-set-o

我希望有一個簡單的解決方案。

Answer 1

我實現了自己的解決方案：

JS：

function findOptimalDistribution(Z, z) { 
    // Make a working copy 
    var Y = Z.slice(0); 

    // Add dummy element so the 'lowest' value is 1, increment z accordingly 
    Y.unshift(1); 
    z++; 

    // calculate sum of Y 
    var R = 0; 
    for(var i = 0; i < Y.length; i++) { 
     R += Y[i]; 
    } 

    // R contains the remaining 'overlap' over z 
    R -= z; 

    // R <= 0 means the condition is already fullfiled 
    if (R <= 0) { 
     return Y.slice(1); 
    } 

    for(var i = Y.length - 1, u = 1; i > 0; i--, u++) { 
     var c = (Y[i] - Y[i - 1]); 

     var b = (R <= c*u); 
     if (b) { 
      c = Math.floor(R/u); 
     } 

     for(var j = Y.length - 1; j >= i; j--) { 
      Y[j] -= c; 
     } 
     R -= c * u; 

     // Subtract the remainder of R, that got 'lost' due to rounding (Math.floor) 
     if (b) { 
      for (var j = i; j < i + R; j++) { 
       Y[j]--; 
      } 

      R = 0; 
     } 

     if (R == 0) { 
      break; 
     } 
    } 

    return Y.slice(1); 
} 

function findOptimalWidths(columns, max_width) {  
    columns.sort(function (a, b) { 
     return a.width - b.width; 
    }); 

    var X = columns.map(function(e) {   
     return e.width; 
    }); 

    var optimal = findOptimalDistribution(X, max_width); 

    for(var i = 0; i < columns.length; i++) { 
     columns[i].width = optimal[i]; 
    } 

    return columns; 
} 

function resizeColumns(){ 
    var columns = []; 
    $('table tr:first-child td').each(function(i, e) { 
     var $e = $(e); 

     $e.css('max-width', 'auto'); 
     columns.push({elem: $e, width: $e.outerWidth()}); 
    }); 



    columns = findOptimalWidths(columns, $('div').innerWidth()); 

    for(var i = 0; i < columns.length; i++) { 
     columns[i].elem.css('max-width', columns[i].width); 
    } 
} 

$(window).resize(function() { 
    resizeColumns(); 
}); 

resizeColumns(); 

HTML：

<div> 
    <table> 
     <tr> 
      <td style="background-color: violet;"> 
       Line 
      </td> 
      <td style="background-color: green;"> 
       LongerLineLongerLineLongerLine 
      </td> 
      <td style="background-color: yellow;"> 
       VeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLine 
      </td> 
     </tr> 
    </table> 
</div> 

CSS：

這裏是代碼中的例子顯示

table { 
    table-layout:fixed; 
    border-collapse: collapse; 
} 

table td { 
    overflow: hidden; 
    box-sizing: border-box; 
    text-overflow: ellipsis; 
} 

div { 
    width: 100%; 
    border: 1px solid red; 
} 

鏈接到小提琴：http://jsfiddle.net/ujQh7/2/

我相信這是一個良好的和intuitiv行與列被截斷的表。

Answer 2

只需使用CSS來設置TD（表數據）

td { 
    max-width: 800px; 
} 

設置上表數據的最大值將保證不列超過寬度（但可能在高度如果指定重疊的心不是增長）

如果你希望有不同的充列不同的最大寬度，使得多個類：

.col1 { 
    max-width: 500px; 
} 

.col2 { 
     max-width: 600px; 
} 

等則只需添加一個類TD標記。如果表是動態創建使用jQuery要添加的類別：

$("td").addClass("myClass yourClass"); 

Answer 3

當文本太長，我們可以通過這個CSS屬性打破他們。

-ms-word-break: break-all; 
word-break: break-all; 

// Non standard for webkit 
word-break: break-word; 

表格單元td您可以添加此CSS。

td { 
    border: 1px solid black; 
    -ms-word-break: break-all; 
    word-break: break-all; 

    // Non standard for webkit 
    word-break: break-word; 
} 

這裏是演示http://jsfiddle.net/kheema/6zJR4/1/

瞭解實際需求，將是很好的使用名爲Succinct一個很小的jQuery插件可以幫助你之後。鏈接在這裏。 http://micjamking.github.io/succinct/

Answer 4

添加width您table，它會換表裏面的內容等於DIV的寬度，但它不會表現出過大的文本

Demo of what u need exactly

table.tbl{ 
    width:100%; /* this will make table equal to div width and clip excess contents*/ 
    table-layout: fixed; 
} 

，並表現出過多的文字，word-break他們

table.tbl{ 
    width:100%; 
    table-layout: fixed; 
    word-break:break-all; 
} 

demo here