CODEWITHSUNDEEP
jqueryhtmlcss
NotaMan
NotaMan

Reputation: 65

How to get tables to display side by side

Here is what I have currently,

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

Note: I am using jquery datatables for it's search functionality.

Here's a current screenshot of what it looks like:

screenshot

I want it to display side by side, not on top of eachother.

Also if anyone has a better solution for searchable tables rather than this, please do share. Thank you

I've been struggling on this for a while, any help on this would be greatly appreciated. Thank you

Upvotes: 1

Views: 686

Answers (4)

RashFlash
RashFlash

Reputation: 1002

Hi i have created a fiddle using your code. it just need few css changes for fiddle 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;
    }

Another thing which can improve your UI, is to change width, either "remove it " or set it little higher

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

screenshot: enter image description here

Upvotes: 2

Ram Prasad Agarwal
Ram Prasad Agarwal

Reputation: 265

Add display:line-block for both tables.

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

Upvotes: 2

Phil
Phil

Reputation: 164733

Use a flexbox layout (note the styles for <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>

Upvotes: 0

Iskandar Reza
Iskandar Reza

Reputation: 962

Change the width of the example_wrapper to 100%. Remove the float:left from the table element. Then wrap each table in a div with CSS style set to display:block.

Upvotes: 1

Related Questions