jquery - 如何使表格并排显示

这是我目前所拥有的

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <style type="text/css">
    .paginate_disabled_previous, .paginate_disabled_next
    {
        display: none;
    }
    .dataTables_info
    {
        display: none;
    }
    #example_wrapper, #example2_wrapper
    {
        width:15%;
        margin-bottom:25px;
        float:left;
        background-color:#008077;
        padding:10px;
        color:white;
    }
    #example2_filter,#example_filter
    {
        float:left;
    }
    label
    {
        width:100%;
    }

    #example_length, #example2_length
    {
        display: none;
    }
    div
    {
        float:left;
    }
    .dataTables_empty
    {
        background-color:red;
        color:white;
    }
    td{
        box-sizing: border-box;
        border:1px solid black;
    }
    *
    {
        font-family: Arial;
        margin:0;
    }
    #hello
    {
        width:100vw;
        height:10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:4em;
        color:white;
        background-color:#006b64;
        margin-bottom:10px;
    }
    body
    {
        background-color:#00A99D;
    }
  </style>
</head>
<body>
    <div id="hello">
Generic Title
</div>
  <table id="example" style="float:left;">
    <thead>
      <tr><th style="font-size:25px;font-family: Arial;">Period 1</th></tr>
    </thead>
    <tbody>
      <tr><td style="background-color:red;color:white">SitePoint</td></tr>
      <tr><td style="background-color:green;color:white">Learnable</td></tr>
      <tr><td style="background-color:green;color:white">Flippa</td></tr>
    </tbody>
  </table>
 <table id="example2" style="float:left;">
    <thead>
      <tr><th style="font-size:25px;font-family: Arial;">Period 2</th></tr>
    </thead>
    <tbody>
      <tr><td style="background-color:red;color:white">SitePoint</td></tr>
      <tr><td style="background-color:green;color:white">Learnable</td></tr>
      <tr><td style="background-color:green;color:white">Flippa</td></tr>
    </tbody>
  </table>
  <script>
  $(function(){
    $("#example").dataTable();
  });
   $(function(){
    $("#example2").dataTable();
  })

  </script>

</body>
</html>

注意：我正在使用jquery数据表的搜索功能。

这是它的当前屏幕截图：

我希望它并排显示，而不是彼此重叠。

另外，如果有人对此有更好的解决方案，请分享。谢谢

我已经为此苦苦挣扎了一段时间，对此的任何帮助将不胜感激。谢谢

最佳答案

嗨，我已经使用您的代码创建了一个小提琴。它只需要很少的CSS更改
小提琴click here https://jsfiddle.net/qm05s1sn/

.dataTables_wrapper {
    position: relative;
    margin-right: 20px;
    clear: none;
}


  table{
          width: 100%;
        }
td{
        box-sizing: border-box;
        border:1px solid black;
        text-align:center;
    }

可以改善UI的另一件事是更改宽度，或者“删除”或将其设置得更高

 #example_wrapper, #example2_wrapper
    {
        width:25%;
        margin-bottom:25px;
        float:left;
        background-color:#008077;
        padding:10px;
        color:white;
    }

屏幕截图：