HTML：如果表格并排放置，如何增加它们的总高度？

Question

我按照以下指南 (https://stackoverflow.com/a/45672648/2402577) 将表格并排放置。由于输出的表格高度不对称，我无法同时更改两个表格的高度（我更喜欢增加表格的显示行数，从而使表格更长）。

我的源代码，请注意我正在使用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>  

输出结果:

正如您所看到的，第一个表格中显示的行数是2。而原本应该是5行(当我注释掉<div class="col-md-6 col-sm-12">)时。

[Q] 我该如何增加两个表格的整体高度(增加要显示的行数)并使它们对称呢?

感谢您宝贵的时间和帮助。

- alper

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" }
         ]
        })
    })
} ) ;

- alper

Answer 2

如果您正在从数据库构建LatestBlocks表格网格，那么可以使用jQuery设置min-height属性。

或者，如果您认为第一个表格的高度固定，可以为第二个表格设置.min-height类并设置min-height属性。

- ahmednawazbutt

Answer 3

你可以在CSS中使用高度和宽度属性。例如，在表格标签中：height="100px"

同样地，对于第二个表格也是如此。

- Tejas

---

它没有帮助。 - alper