使用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最大化統一寬度單元格的數量

回答

相關問題