如何使表格並排顯示
[英]How to get tables to display side by side
問題描述
這是我目前所擁有的
<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數據表的搜索功能。
這是它的當前屏幕截圖：
我希望它並排顯示，而不是彼此重疊。
另外，如果有人對此有更好的解決方案，請分享。 謝謝
我已經為此苦苦掙扎了一段時間，對此的任何幫助將不勝感激。 謝謝
4 個解決方案
解決方案1
2 2017-09-08 00:35:10
為兩個表添加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
將example_wrapper的寬度更改為100％。 從表格元素中刪除float:left 。 然后將每個表包裝在div中，CSS樣式設置為display:block 。
解決方案3
1 已采納 2017-09-08 00:37:36
嗨，我已經使用您的代碼創建了一個小提琴。 它只需要為小提琴進行一些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;
}
可以改善UI的另一件事是更改寬度，或者“刪除”或將其設置得更高
#example_wrapper, #example2_wrapper
{
width:25%;
margin-bottom:25px;
float:left;
background-color:#008077;
padding:10px;
color:white;
}
屏幕截圖：
解決方案4
0 2017-09-08 00:26:13
使用彈性框布局（請注意<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.