如何使表格并排显示
[英]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. 注意：我正在使用jquery数据表的搜索功能。
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 个解决方案
解决方案1
2 2017-09-08 00:35:10
Add display:line-block for both tables. 为两个表添加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>
解决方案2
1 2017-09-08 00:24:00
Change the width of the example_wrapper to 100%. 将example_wrapper的宽度更改为100％。 Remove the float:left from the table element. 从表格元素中删除float:left 。 Then wrap each table in a div with CSS style set to display:block . 然后将每个表包装在div中，CSS样式设置为display:block 。
解决方案3
1 已采纳 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/ 它只需要为小提琴进行一些CSS更改， 请单击此处 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 可以改善UI的另一件事是更改宽度，或者“删除”或将其设置得更高
#example_wrapper, #example2_wrapper
{
width:25%;
margin-bottom:25px;
float:left;
background-color:#008077;
padding:10px;
color:white;
}
screenshot: 屏幕截图：
解决方案4
0 2017-09-08 00:26:13
Use a flexbox layout (note the styles for <main> ) 使用弹性框布局（请注意<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.