如何让表格并排显示答案

【问题标题】：How to get tables to display side by side如何让表格并排显示
【发布时间】：2018-02-16 19:25:13
【问题描述】：

这是我目前拥有的，

<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 数据表来实现它的搜索功能。

这是它的当前截图：

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

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

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

【问题讨论】：

将表格包装在另一个元素中（如<div>）并将其CSS设置为display: flex;。问题解决了。见css-tricks.com/snippets/css/a-guide-to-flexbox
您的代码似乎可以工作
可能重复：stackoverflow.com/q/46103520/3597276

标签： jquery html css

【解决方案1】：

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

截图：

【讨论】：

我以前有过这个，不知道如何使 tds 100% 和标题位于 div 的中心。
是的，我已经更新了 jsfiddle 代码，您现在可以查看。需要很少的 CSS 调整

【解决方案2】：

为两个表添加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>

【讨论】：

根据需要调整#example_wrapper、#example2_wrapper的宽度。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

@NotaMan 显然您还有其他一些冲突的 CSS。你需要解决这个问题