HTML：如果它们是并排的，如何增加表的整体高度？

I have followed following guide (https://*.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).

我已按照以下指南（https://*.com/a/45672648/2402577）并排放置表格。由于输出表的高度不对称，我无法更改两个表的高度（我更喜欢增加表的显示行号，因此具有更长的表）。

My source code, please note that I am using Bootstrap:

我的源代码，请注意我使用的是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"> ).

正如您所看到的，第一个表格显示的行号是2.原始时它应该是5（当我注释掉

）时。

[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 个解决方案

#1

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

我意识到自己的错误。当我增加scrollY：value它解决了我的问题，它在$（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" }
         ]
        })
    })
} ) ;

#2

Well you could set min-height property using jquery if you are building the LatestBlocks table grid from db.

如果要从db构建LatestBlocks表格，那么可以使用jquery设置min-height属性。

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

或者您可以使用.css类，如果您认为第一个表的高度是固定的，请为您的第二个表设置min-height属性

#3

-3

You can use height and width attribute in CSS For eg. in table tag: height="100px"

您可以在CSS中使用height和width属性。例如。在表格标签中：height =“100px”

Simmilarly, for the second table

Simmilarly，第二个表

#1