Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML: How to increase tables' overall height if they are side-by-side?

I have followed following guide (https://stackoverflow.com/a/45672648/2402577) to put tables side-by-side. As output tables' heights are not symmetric and I am not able to make change both tables' height (I prefer to increase tables' displayed row number hence having a longer table).

My source code, please note that I am using 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>  

Output: enter image description here

As you can see first table's displayed row number is 2. In original it should be 5 (when I comment out <div class="col-md-6 col-sm-12"> ).

[Q] How could I make both tables' overall height larger (increase the the row number to be displayed) and make both tables symmetric?

Thank you for your valuable time and help.

like image 709
alper Avatar asked Aug 15 '17 07:08

alper


People also ask

How do you increase the size of an overall table in HTML?

HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.

How do you change the height of a table cell in HTML?

To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.

How do you make the height of 2 divs equal?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.


1 Answers

I realize my mistake. When I increase scrollY: value it solved my problem, which is defined under $(document).ready(function()).

Example:

$(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" }
         ]
        })
    })
} ) ;
like image 185
alper Avatar answered Oct 04 '22 03:10

alper