表格标题的最大高度，如果不够，请水平扩展

Question

我有一个具有任意数量的列和任意标题的表。

我想设置标题的最大高度。 如果高度不足以容纳文本，我希望单元格水平拉伸，并可能在整个表格中进行水平滚动。

需要CSS和/或javascript（JQuery）解决方案。

在下图中，如果下划线是空格且未手动放置，则我对1.和2.感到满意，对3.或4.感到不满意，并且对5.感到满意。

 .overflow-x { overflow-x: auto; overflow-y: hidden; } td { padding: 10px; border: 1px solid black; line-height: 20px; } td>div { max-height: 40px; } 

 <div style="width:300px; background-color:#fde; padding:10px"> <ol> <li> <div class="overflow-x"> <table> <tr> <td>quick</td> <td>brown</td> <td>fox</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the quick brown fox</td> <td>jumps over</td> <td>the lazy dog</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the quick brown fox jumps over the lazy dog</td> <td>the quick brown fox jumps over the lazy dog</td> <td>the quick brown fox jumps over the lazy dog</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td> <div>the quick brown fox jumps over the lazy dog</div> </td> <td> <div>the quick brown fox jumps over the lazy dog</div> </td> <td> <div>the quick brown fox jumps over the lazy dog</div> </td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> </tr> </table> </div> </li> </ol> </div> 

Answer 1

尝试这个。 如果页面上只有一个表，可以简化JS，但是我通过.each来运行它，以确保每个表都是独立管理的。 这种增量的事情显然不是最佳的性能，但是也许您的方法可以解决。

一个陷阱是我认为必须以这种方式定义文本的行高。 您已经在CSS中找到了它，但是这使其成为非可选，否则您需要以其他方式定义最大高度的像素值，因为这种方法没有尝试解析文本的行数即将开始，它只是在看第一行tr有多高（如果使用<thead>或<th>则可能是另一个简化。

 $('.overflow-x').each(function() { var maxHeight = 2*parseInt($(this).find('tr:first td').css('line-height')); var initWidth = $(this).width(); for (i = initWidth; i < 1000; i++) { var height = $(this).find('tr:first td').height(); if (height <= maxHeight) { break; } $(this).find('table').width(i + 1); } }) 

 .overflow-x { overflow-x: scroll; } td { padding: 10px; border: 1px solid black; line-height: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:300px; background-color:#fde; padding:10px"> <ol> <li> <div class="overflow-x"> <table> <tr> <td>quick</td> <td>brown</td> <td>fox</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the quick brown fox</td> <td>jumps over</td> <td>the lazy dog</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the quick brown fox jumps over the lazy dog</td> <td>the quick brown fox jumps over the lazy dog</td> <td>the quick brown fox jumps over the lazy dog</td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td> <div> the quick brown fox jumps over the lazy dog </div> </td> <td> <div> the quick brown fox jumps over the lazy dog </div> </td> <td> <div> the quick brown fox jumps over the lazy dog </div> </td> </tr> </table> </div> </li> <li> <div class="overflow-x"> <table> <tr> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> <td>the_quick_brown_fox jumps_over_the_lazy_dog</td> </tr> </table> </div> </li> </ol> </div> 

Answer 2

这是我的解决方案。 它不是非常灵活，因为它仅允许表格单元格中的文本。 但这不依赖于浏览器表格式。

 var maxHeight = 70; var $scratchpad = $("#scratchpad"); var space = $scratchpad.find("span").width(); fit(); function fit() { if($('.overflow-x table').height() <= maxHeight) return; $('.overflow-x table tr:first td div').each(function() { var $div = $(this); $scratchpad.html( $div.text().trim().replace(/\\s+/g, " ").split(" ") .map(function(word) { return "<span>"+word+"</span>"}) .join("") ); var widths = $.map($scratchpad.find("span"), function(span) { return $(span).width(); }); $div.width(findLeastWidth(widths, 2)+1); function findLeastWidth(widths, lines) { var totalWidth = widths.reduce(function(sum, w) {return sum+w}, 0) + space * Math.max(0,(widths.length - lines)); if(lines == 1 || totalWidth == 0) return totalWidth; var minWidth = totalWidth / lines; for(var w1 = widths[0], i1 = 1; w1 < minWidth && i1 < widths.length; i1 ++) w1 += widths[i1] + space; return Math.min( Math.max(w1, findLeastWidth(widths.slice(i1), lines-1)), Math.max(w1 - widths[i1-1] - space, findLeastWidth(widths.slice(i1-1), lines-1)) ); } }) } setTimeout(function() { setInterval(function() { generate(); fit(); }, 500); }, 2000); function generate() { var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".split(" "); var html = ""; for(var i = 0, nCols = Math.random()*8+1; i < nCols; i++) { html += "<td><div>"; for(var j = 0, nWords = Math.random()*Math.random()*8+1; j < nWords; j++) html += lorem[Math.floor(Math.random()*lorem.length)]+" "; html += "</div></td>"; } $('.overflow-x table tr:first').html(html); } 

 .overflow-x { overflow-x: auto; overflow-y: hidden; } td { padding: 10px; border: 1px solid navy; } #scratchpad { white-space: nowrap; visibility: collapse; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:350px; background-color:#dfe; padding:10px"> <div class="overflow-x"> <table> <tr> <td><div>quick</div></td> <td><div>The quick brown fox jumps over the lazy dog</div></td> <td><div>over the lazy dog</div></td> <td><div>fox jumps over the lazy dog</div></td> </tr> </table> </div> </div> <div id="scratchpad"> [<span> </span>] </div> 

不过，我仍然希望看到更好的解决方案。