How to get tables to display side by side
Question
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:
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
4 answers
solution1
2 2017-09-08 00:35:10
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>
solution2
1 2017-09-08 00:24:00
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 .
solution3
1 ACCPTED 2017-09-08 00:37:36
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:
solution4
0 2017-09-08 00:26:13
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.