html 表格并排： <table style="float: left;"> 不起作用答案

【问题标题】：html table side by side: <table style="float: left;"> does not workhtml 表格并排： <table style="float: left;"> 不起作用
【发布时间】：2017-08-31 13:18:55
【问题描述】：

我的目标是将两张桌子并排放置。我遵循了以下指南：https://stackoverflow.com/a/11690480/2402577

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

表格输出：

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

【问题讨论】：

由于您使用的是class属性，请编辑您的问题并添加您的CSS代码。
我看到你正在使用container 和row。这是否意味着您正在使用 Bootstrap？因为这会让一切变得更容易。
旁注：h3 不允许在 caption 内。
是的，我正在使用 Bootstrap @HubertGrzeskowiak
在使用 Bootstrap 时，只需使用正确的 col-md-6 或其他。并摆脱 `width="100%"

标签： html html-table

【解决方案1】：

您已将表格宽度指定为 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>

希望这会有所帮助。

【讨论】：

有效！但是桌子的高度不够长而且不对称。是否有可能使它们更长。请参阅我更新的问题。 @Bhavin Shah

【解决方案2】：

这就是您使用 Bootstrap 的方式。它将在中到大屏幕上并排显示表格，并在小屏幕上显示彼此下方。

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

【讨论】：

在这里运行脚本时，会在一个小窗口中运行。您可以单击右侧的Full page 链接以在更大的窗口中查看它。这是有意的，通常称为响应式设计@Avatar

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果你尝试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>

【讨论】：