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: 
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.
3 Answers
Answers 1
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" } ] }) }) } ) ; Answers 2
Well you could set min-height property using jquery if you are building the LatestBlocks table grid from db.
or you could use .css class for that and set min-height property for your second table if you think the height of first table is fixed
Answers 3
You can use height and width attribute in CSS For eg. in table tag: height="100px"
Simmilarly, for the second table
0 comments:
Post a Comment