Question

我的目标是并排放置两张桌子。我遵循了以下指南：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>

表格输出：

< p>

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

Answer 1

您已将表格宽度设为 100％;所以尽管你已经给出了float:left

，它将占据全宽

我的桌面宽度减少了 50％。

＆＃13;

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

＆＃13;

希望这有帮助。

Answer 2

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

{{1}}

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

Answer 4

如果您尝试width: 50%;风格，我认为您可以达到您想要的效果。以下是width: 50%;。

的硬编码示例

如果您使用的是bootstrap，那么可以使用类来定位GRID样式的内容。 Here you can read about it.

＆＃13;

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

＆＃13;

html表并排：不起作用

4 个答案: