两个或多个桌子并排

时间:2014-05-05 09:52:18

标签: javascript jquery html

我想在此代码中添加至少另一个表,任何帮助表示赞赏?

> <div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./CSVFiles/CallsClosedbyDept.csv');
});
</script>

代码加载csv并将其显示为表格,我想将另一个CSV文件添加为表格,但不是在第一个表格下方,我希望它们并排显示。完整的代码如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><style>
div.csv2table-div {
  padding           : 5px; 
  margin            : 1px;
}
table.csv2table-table {
  border-collapse   : collapse;
  border-spacing    : 0px;
  margin-bottom     : 10px;
}
th.csv2table-table-th{
  border-color      : #eee #999 #777 #bbb;
  border-style      : solid;
  border-width      : 1px;
  background-color  : red; 
  padding           : 8px;
  font-size         : 16px;
  color         : white;
  text-align        : center;
}
td.csv2table-table-td{
  border-color      : #eee #999 #777 #bbb;
  border-style      : solid;
  border-width      : 1px;
  padding           : 8px;
  font-size         : 14px;
  text-align        : center;
}


td.csv2table-table-td:nth-child(1){
  background-color  : blue;
  color         : white;
}

th.csv2table-sortMark{

}
td.csv2table-hoboNum{

}
</style><title>Calls Closed by Department or Depot</title></head>
<body>
<div style="text-align: left;"><div style="text-align: left;"><img style="width: 130px; height: 76px;" alt="" src="file://///vm-spiceworks/e$/Program%20Files%20%28x86%29/Spiceworks/pkg/gems/spiceworks_public-7.1.00024/photos/Hire%20Solutions-01.jpg"><br></div><big style="font-weight: bold;"><big><big><br><span style="color: rgb(51, 0, 153);">Calls Closed by Department or Depot May 2014</span><br><br></big></big></big>
</div>


    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery.csv2table-0.02-b-4.7.js"></script>


<script>
  $.csv2table.cssReset();
</script>



<div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./CSVFiles/CallsClosedbyDept.csv');
});
</script>




<br>
&nbsp;<span style="font-weight: bold; color: rgb(51, 0, 153);">Confidential and `Proprietary</span></body></html>`

1 个答案:

答案 0 :(得分:0)

使用此结构

<div style="border:1px #ccc solid">

<div style="width:45%; float:left; min-height:300px;">
1st table code here
</div>

<div style="width:45%; float: right; min-height:300px;">
2nd table code here
</div>

<div style="clear:both"></div>
</div>