带自动布局的表格的最大宽度

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