html表并排：< table style =" float：left;">不起作用 [英] html table side by side: <table style="float: left;"> does not work

问题描述

我的目标是并排放置两张桌子。我遵循了以下指南：

正如您所看到的，这些表并不是并排放置的。我不确定我做错了什么。我怎么能解决这个问题呢？

有价值的建议似乎有用，但现在桌子的高度非常小。完成更改：< div class =col-md-10> 已添加，宽度已删除：此工作正常但现在桌子的高度不对称而且足够长。

 < div class =containerid =coverpage> 
< div class =row> 
< div class =col-lg-6 col-md-6 col-sm-6 col-xs-6> 
< table id =tableblockclass =display>< caption>< h3 style =color：black;> Latest Blocks< / h3>< / caption>< /表> 
< / div> 
< div class =col-lg-6 col-md-6 col-sm-6 col-xs-6> 
< table id =tabletxsclass =display>< caption>< h3 style =color：black;>最新交易< / h3>< / caption>< /表> 
< / div> 
< / div> 
< / div> 
  

表输出：

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

解决方案

这是你用Bootstrap方式做的。它将在中间到大屏幕上并排显示表格，并在小屏幕上显示。

 < link rel =stylesheettype =text / csshref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < div class =containerid =coverpage> < div class =row> < div class =col-md-6 col-sm-12> < table id =tableblockclass =table> < caption>最新块< / caption> < TR>< TD>细胞< / TD>< / TR> < /表> < / DIV> < div class =col-md-6 col-sm-12> < table id =tabletxsclass =table> < caption>最新交易< / caption> < TR>< TD>细胞< / TD>< / TR> < /表> < / DIV> < / div>< / div>  

My goal is to put two tables side by side. I have followed following guide: https://stackoverflow.com/a/11690480/2402577

<table style="float: left;">

My example code:

<div class="container" id="coverpage">
  <div class="row">
     <table id="tableblock" class="display" width="100%" style="float:left"><caption><h3>Latest Blocks</h3></table>
     <table id="tabletxs"   class="display" width="100%" style="float:left"><caption><h3>Latest Transactions</h3></table>
  </div>
</div>

Tables output:

As you can see the tables not places side by side. I am not sure what I did wrong. How could I fix this issue?

With valuable advices it seems working but now table's height is pretty small. Done changes: <div class="col-md-10"> added, width removed: This works but now tables height is not symmetric and long enough.

<div class="container" id="coverpage">
  <div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">     
     <table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
     <table id="tabletxs"   class="display"><caption><h3 style="color:black;">Latest Transactions</h3></caption></table>
  </div>
  </div>
</div>

Table Output:

Thank you for your valuable time and help.

解决方案

This is how you do it the Bootstrap way. It will show the tables side by side on middle to big screens and below each other on small screens.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container" id="coverpage">
  <div class="row">
    <div class="col-md-6 col-sm-12">
       <table id="tableblock" class="table">
         <caption>Latest Blocks</caption>
         <tr><td>cell</td></tr>
       </table>
     </div>
     <div class="col-md-6 col-sm-12">
       <table id="tabletxs" class="table">
         <caption>Latest Transactions</caption>
         <tr><td>cell</td></tr>
       </table>
     </div>
  </div>
</div>

这篇关于html表并排：< table style =" float：left;">不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！