使用jQuery最大化统一宽度单元格的数量

我想创建一个使用div的表格，其中每行根据单元格中的文本内容保存最大数量的统一大小的单元格。最后，我将使用AJAX加载一个字符串数组。我希望能够确定最长的字符串的最大单元格宽度是多少，如果浏览器将它们呈现为先验，然后使用该信息来计算如果所有单元格都是使宽度达到最大。使用jQuery最大化统一宽度单元格的数量

我遇到了计算最大单元格大小的问题，因为我动态生成它们并将它们插入表格中，'width'函数总是返回0，因为它们还没有被渲染。

的，我想从概念上做的一个例子是，像这样：例

<style type="text/css"> 
.dtable {display: table;} 
.drow {display: table-row;}  
.dcell { 
    font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace; 
    display: table-cell; padding: 10px; outline:black solid thin; background-color: yellow; 
} 
.dcell > * {vertical-align: middle; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() {  
     var w = $('#qcell2').width(); 
     alert(w); 

     $('#qcell4').width(w); 
     $('#qcell5').width(w); 
     $('#qcell6').width(w); 
    }); // end document-ready callback 
</script> 

</head> 
<body> 
    <div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;"> 
     <div id="qrow" class="drow" style=""> 
      <div id="qcell1" class="dcell">text</div> 
      <div id="qcell2" class="dcell">a lot more text</div> 
      <div id="qcell3" class="dcell">some text</div> 
     </div> 
    </div> 
    <div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;"> 
     <div id="qrow" class="drow"> 
      <div id="qcell4" class="dcell">text</div> 
      <div id="qcell5" class="dcell">a lot more text</div> 
      <div id="qcell6" class="dcell">some text</div> 
     </div>  
    </div> 
</body> 
</html>

I made a screenshot available here

通知我让浏览器渲染一个表中三个单元格，并自我可以直观地看到＃qcell2是最长的，我绘制了第二个表格，将所有宽度设置为我确定＃qcell2的宽度。由于我可以让浏览器首先渲染所有的单元格，并且表格非常宽，这样浏览器就不会压缩单元格，所以我会得到所有单元格的舒适最大宽度。我想用这些信息来计算每行可以绘制多少个单元格，以使它们大小统一，并使用表格中可用的所有房地产。

最后，我将从一个简单的字符串数组开始，创建一个包含尽可能多字符串的单元格的表格，因为我可以舒适地放置在表格中，使得它们的大小均一致为细胞持有最宽的字符串。

来源

2012-03-30 harschware

如果要显示表格，请使用<table>。它做你需要的一切，不用任何JavaScript！

只要您使用它们来显示表格数据，表格没有任何问题。

来源

2012-03-30 08:02:42 ONOZ

使用jQuery最大化统一宽度单元格的数量

回答

相关问题