एचटीएमएल: यदि वे साइड-साइड हैं तो टेबल की समग्र ऊंचाई कैसे बढ़ाएं?

Question

मैंने तालिकाओं को एक साथ रखने के लिए निम्नलिखित मार्गदर्शिका (https://stackoverflow.com/a/45672648/2402577) का पालन किया है। चूंकि आउटपुट टेबल 'हाइट्स सममित नहीं होते हैं और मैं टेबल और ऊंचाई दोनों को बदलने में सक्षम नहीं हूं (मैं तालिकाओं को प्रदर्शित करना पसंद करता हूं' पंक्ति पंक्ति संख्या इसलिए लंबी तालिका होती है)।

मेरे स्रोत कोड, कृपया ध्यान दें कि मैं बूटस्ट्रैप उपयोग कर रहा हूँ:

<div class="container" id="coverpage">                              
    <div class="row">                                   
    <div class="col-md-6 col-sm-12">                           
    <table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table>   
    </div>                                      
    <div class="col-md-6 col-sm-12">                           
    <table id="tabletxs" class="display" ><caption><h3 style="color:black;">Latest Transactions</h3></caption></table>  
    </div>                                      
    </div>                                      
</div> 

आउटपुट:

आप पहली बार तालिका प्रदर्शित किया पंक्ति संख्या देख सकते हैं 2. यह 5 होना चाहिए मूल में (है जब मैं <div class="col-md-6 col-sm-12"> पर टिप्पणी करता हूं)।

[क्यू] मैं कैसे कर सकता है दोनों तालिकाओं 'समग्र ऊंचाई बड़ा (पंक्ति संख्या प्रदर्शित करने के लिए वृद्धि) और दोनों तालिकाओं सममित बनाते हैं?

अपने बहुमूल्य समय और मदद के लिए धन्यवाद।

Answer 1

के लिए मैं अपनी गलती का एहसास। जब मैं scrollY बढ़ाता हूं: मान ने मेरी समस्या हल की, जिसे $(document).ready(function()) के तहत परिभाषित किया गया है।

उदाहरण:

$(document).ready(function() { 
    $.get("btabl", function(result){ 
     $('#tableblock').DataTable({ 
     data: result, 
     scrollY: 800, //I increased this value. 
     paging: false, 
     info: false, 
     searching: false, 
     order: [[ 0, "desc" ]], 
     columnDefs: [ 
      { 
       targets: [0,1], 
       render: function (data, type, row, meta) { 
        if(type === 'display'){ 
         data = " " + data ; 
         data = data.replace(/(@@(.+)@@)/,'<a onClick="a_onClick(' + "'" + "$2" + "'" + ')">' + "$2" + '</a>') ; 
         // data = '<a onClick="a_onClick(' + "'" + encodeURIComponent(data) + "'" + ')">' + data + '</a>'; 
         // data = '<a href="search/' + encodeURIComponent(data) + '">' + data + '</a>'; 
        } 

        return data; 
       } 
      }, 
      {className: "dt-center", "targets": [0,1,2,3]} 
     ], 
     columns: [ 
      { title: "Block" }, 
      { title: "Mined By" }, 
      { title: "Time" }, 
      { title: "Txs" } 
     ] 
     }) 
    }) 
}) ; 

Answer 2

आप सीएसएस में ऊंचाई और चौड़ाई विशेषता का उपयोग कर सकते हैं उदाहरण के लिए। तालिका टैग में: ऊंचाई = "100px"

Simmilarly, दूसरी तालिका

Answer 3

वैसे आप मिनट ऊंचाई संपत्ति jQuery का उपयोग कर यदि आप डाटाबेस से LatestBlocks तालिका ग्रिड का निर्माण कर रहे सेट कर सकते हैं।

या आपको लगता है कि के लिए .css वर्ग उपयोग करें और अपनी दूसरी तालिका के लिए न्यूनतम ऊंचाई गुण सेट कर सकता है अगर आपको लगता है पहली तालिका की ऊंचाई ठीक हो गई है