个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是我目前拥有的，
<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 数据表来实现搜索功能。
这是当前的屏幕截图:
我希望它并排显示，而不是相互重叠。
此外，如果有人对可搜索表有更好的解决方案，请分享。谢谢
我已经为此苦苦挣扎了一段时间，对此的任何帮助将不胜感激。谢谢
最佳答案
您好，我使用您的代码创建了一个 fiddle 。它只需要一些 css 更改 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;
}
另一件事可以改善你的用户界面，就是改变宽度，要么“删除它”，要么把它设置得更高一点
#example_wrapper, #example2_wrapper
{
width:25%;
margin-bottom:25px;
float:left;
background-color:#008077;
padding:10px;
color:white;
}
截图: 
关于jquery - 如何让表格并排显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46106805/
25
4
0
我在 Excel 中有两个图表，但我想将这些图表合并为一个图表。如您所见，我缩小了 graph1 中图表的大小。我想移动 graph2 中的图表进入graph1中的空白区域 最佳答案 我认为在基本的
我正在为我的站点构建一个 HTML 模板，并希望在左侧有一个主要内容 Pane ，在右侧有一个导航 Pane (类似于 Twitter)。 我假设 DIV 不是首选方法，因为默认情况下它们是从上到下列
我有以下 fiddle :http://jsfiddle.net/BFSH4/ 如您所见，有两个问题: h1 和 h2 没有垂直对齐。 导航和内容未水平对齐。 对于 1. 我已经尝试了 margin
在下面的示例中，我试图让“左”和“右”div 并排显示。显然我的理解是有缺陷的，但我犯了什么错误，因为(至少在 Chrome 中)它们没有并排出现。 谢谢
我在 chrome 上使用 Tampermonkey 向网页添加按钮。单击时，脚本会分析页面，然后显示警报。这是显示按钮的代码: function Main(){ GM_addStyle(
我的自定义键盘中有 UICollectionView，它有两行高度相同但宽度不同(大小来自服务器)的单元格，滚动方向是水平的。 我怎样才能并排显示集合项，而不用这种基于先前单元格宽度的奇怪居中？ 最佳
任何人都可以帮助将两个位图图像组合成一个位图 在安卓中(并排)。 谢谢，尤瓦拉杰 最佳答案 您可以使用 Canvas - 查看这篇文章: http://www.jondev.net/articles/
如果有的话，设计 RPM 的“正确”方法是什么，以便可以通过 YUM/RPM 并排安装多个版本而不会相互干扰？对于库，正确的答案似乎与 sonames 有关，尽管我找不到任何关于 sonames、符号
从我的 last question 跟进:我执行了 Steve 提供的所有步骤，SxS Parse 日志为空，但我仍然收到“Class Not Registered”错误。 我知道我的 .exe 正在
我想并排显示两个图 block 层，就像并排的传单插件 ( https://github.com/digidem/leaflet-side-by-side )。 但是，我不知道如何用 react 来做
我正在制作一个将 PO 导出为 PDF 的采购订单系统，但我需要在上半部分显示来自买方和卖方的数据。我想并排放置 2 个 DetailView，每个都有 50% 的页面宽度。有可能的？到目前为止，我还
无论屏幕大小如何，我都试图并排 float 两个 div。目前在 IE 7 中，如果我调整窗口大小，一个 div 会下降到另一个下方。我认为这是因为 div2 包含一个表格，一旦窗口边缘碰到表格，它就
我想使用这个数据框的 geom_bar() 创建一个并排的条形图， > dfp1 value percent1 percent 1 (18,29] 0.20909091 0.454545
我正在尝试在 Xcode (Swift) 中创建一个单位转换器，并一直在尝试在 Storyboard 中对 UI 进行排序。我一直试图在屏幕的上半部分并排放置两个表格 View ，以保存两个测量类型的
下面的代码运行良好。 eventDrag 和 Drop 我可以放置在表格内的任何位置。 但是我只想将事件拖放到事件的左侧和右侧。 我想从其他事件的顶部和底部停止拖动事件。只有左侧和右侧的其他事件我想拖
我似乎无法让我的图层列表正常工作。 我需要
我想要类似 unix 中的 paste 命令，它需要两个文件并打印第一行，第一个文件，然后是分隔符，然后是第二个文件的第一行，然后是换行符，然后是第一个文件的第二行第二个文件的文件分隔符第二行，等等。
我想将我的内部应用程序的测试版本部署到我的测试组，我需要它与当前的 LIVE 版本一起安装。 我更改了发布选项中的所有内容，但它仍然会覆盖我的实时安装。我还需要做什么？我是否必须更改“应用程序”选项卡
我想创建一个设置，其中左侧有一个图像，右侧有一个 div。我正在使用 float left 来完成此操作，但我希望右侧的 div 与左侧的图像具有相同的高度，并且文本垂直居中。 这是一个jsfiddl
如何让两张 table 并排放置。问题可能会出现，有时一张 table 可能比另一张 table 大它旁边的表格，所以这可能会导致问题并且下面的表格可能不对齐，我想解决。在我制作的演示中，我有四个表，
我是一名优秀的程序员,十分优秀！