Question

这是我目前所拥有的，

<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数据表进行搜索功能。

以下是目前的截图：

screenshot

我想让它并排显示，而不是在彼此之上。

此外，如果有人有更好的解决方案可搜索表而不是这个，请分享。谢谢

我已经在这方面挣扎了一段时间，对此的任何帮助都将不胜感激。谢谢

Answer 1

为两个表添加display:line-block。

<div style="display: inline-block;">
  <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>
  </div>
  <div style="display: inline-block;">
 <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>
  </div>

Answer 2

将example_wrapper的宽度更改为100％。从表元素中删除float:left。然后将每个表包装在一个div中，CSS样式设置为display:block。

Answer 3

您好我使用您的代码创建了一个小提琴。它只需要很少的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;
    }

可以改善用户界面的另一件事是更改宽度，“删除它”或将其设置得更高

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

截图：

Answer 4

使用flexbox布局（请注意<main>的样式）

＆＃13;

body {
  background-color: #00A99D;
  font-family: Arial, sans-serif;
}

main {
  display: flex;
}

table {
  margin-bottom: 25px;
  background-color: #008077;
  padding: 10px;
  color: white;
}

th {
  font-size: 25px;
}

td {
  background-color: green;
  color: white;
  border: 1px solid black;
}

tr:first-child td {
  background-color: red;
}

＆＃13;

<main>
  <table>
    <thead>
      <tr><th>Period 1</th></tr>
    </thead>
    <tbody>
      <tr><td>SitePoint</td></tr>
      <tr><td>Learnable</td></tr>
      <tr><td>Flippa</td></tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr><th>Period 2</th></tr>
    </thead>
    <tbody>
      <tr><td>SitePoint</td></tr>
      <tr><td>Learnable</td></tr>
      <tr><td>Flippa</td></tr>
    </tbody>
  </table>
</main>

＆＃13;

如何让表格并排显示

4 个答案: