并排html表格：<table style =“float：left;”>不起作用

-1

我的目标是并排放置两个表格。我遵循以下指导：https://stackoverflow.com/a/11690480/2402577 并排html表格：<table style =“float：left;”>不起作用

<table style="float: left;">

我的示例代码：

<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>

表输出：

正如你所看到的表没有地方并排。我不确定我做错了什么。我该如何解决这个问题？

有了宝贵的意见，它似乎工作，但现在桌子的高度是非常小的。完成更改：添加了<div class="col-md-10">，删除了width：此方法有效，但现在表格高度不对称且足够长。

<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>

表输出：

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

来源

2017-08-14 Alper

由于您使用'class'属性，请编辑您的问题，并添加CSS代码。 –

我看到你正在使用'container'和'row'。这是否意味着你正在使用Bootstrap？因为那会让一切变得更容易。 –

旁注：'h3'不能在'caption'里面。 –

这是你如何做到这一点的引导方式。它将在中间到大屏幕上并排显示桌子，在小屏幕上显示桌子。

<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>

来源

2017-08-14 10:36:36

当你在这里运行这个脚本时，它会运行在一个小窗口中，你可以点击右侧的'Full page'链接在更大的窗口中看到它，这通常被称为Responsive Design @Avatar –

您已将表格宽度设为100％;所以它会占用它的全部宽度，虽然你已经给了float:left

我已经减少了你的餐桌宽度50％。

<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" width="50%" style="float:left"><caption><h3>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" width="50%" style="float:left"><caption><h3>Latest Transactions</h3></caption> 
 
    </table> 
 
    </div> 
 
    </div> 
 
</div>

希望这有助于。

来源

2017-08-14 10:14:42

它的工作原理！但表格的高度不够长和不对称，是否有可能使它们更长，请看我更新的问题。 @Bhavin Shah – Alper

如果你尝试width: 50%;的风格，我认为你可以达到你想要的。这是一个硬编码的例子width: 50%;。

如果您使用引导程序，那么有可用的类来定位GRID风格的东西。 Here you can read about it.

<!DOCTYPE html> 
 

 
<h1 style="float: left; width: 50%;">Table1</h1> 
 
<h1 style="float: right; width: 50%;">Table2</h1> 
 
<table id="table1" style="float: left; width: 50%;border: solid black 1px;"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 

 

 

 

 
<table id="table2" style="float: left; width: 50%; border: solid blue 1px;"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>

来源

2017-08-14 10:16:26

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>abc</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 
</head> 
<style> 
</style> 
<body> 

<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-sm-6"> 
     <table id="tableblock" class="table"> 
     <caption>Latest Blocks</caption> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     </table> 
    </div> 
    <div class="col-sm-6"> 
     <table id="tabletxs" class="table"> 
     <caption>Latest Transactions</caption> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     </table> 
    </div> 
    </div> 
</div> 

</body>

来源

2017-08-31 05:18:55 Lekhraj

并排html表格：<table style =“float：left;”>不起作用

回答

相关问题