HTML: Jak zwiększyć całkowitą wysokość tabel, jeśli są one obok siebie?

Question

Podążyłem za przewodnikiem (https://stackoverflow.com/a/45672648/2402577), aby umieścić tabele obok siebie. Ponieważ wysokości tabel wyjściowych nie są symetryczne i nie jestem w stanie zmienić wysokości obu tabel (preferuję zwiększenie liczby wierszy wyświetlanych w tabelach, a więc posiadanie dłuższego stołu).

Mój kod źródłowy, należy pamiętać, że używam bootstrap:

<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> 

wyjściowa:

Jak widać wyświetlany numer wiersza pierwszej tabeli jest 2. W oryginalnym powinno być 5 (kiedy komentuję <div class="col-md-6 col-sm-12">).

[Q] Jak mogę zwiększyć ogólny wzrost obu tabel (zwiększyć numer wiersza do wyświetlenia) i uczynić obie tabele symetrycznymi?

Dziękuję za cenny czas i pomoc.

Answer 1

Zdaję sobie sprawę, mój błąd. Kiedy zwiększam scrollY: wartość to rozwiąże mój problem, który jest zdefiniowany pod $(document).ready(function()).

Przykład:

$(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

Możesz użyć atrybutu wysokości i szerokości w CSS Dla np. w tagu tabeli: height = "100px"

Simmilarly, na drugim stole

Answer 3

Cóż można ustawić właściwość min-height użyciu jquery, jeśli budujemy siatkę LatestBlocks tabeli z db.

lub można użyć .css klasę do tego i ustawić min-height Właściwość do drugiej tabeli, jeśli uważasz, że wysokość pierwszej tabeli jest stała