I have a quite dynamic table where you can hide and show different columns (and also change the order on the columns).
I've tried a few directives and plugins but no one is working well (or as I expect...I am doing wrong) for me.
Can you guys help me to get the table header fixed?
plnkur
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<p>Visible Columns:</p>
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
<br/>
<table border="1" class="table table-striped table-hover table-responsive table-bordered">
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="row[column.id]"></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}]; //and so on..
});
</script>
</body>
</html>
Related
I'm a little new to both Bootstrap and ASP.Net.
I'm trying to use an very simple example from Bootstrap homesite
where I just throw this into about.cshtml file.
The Bootstrap is version 3.4.1 on the ASP.Net and I'm choosing the 3rd version of the Bootstrap example but I'm not getting any table and just 3 stacked text besides each other. Is it the wrong version or am I not able to see the mistake? What am I doing wrong?
#{
ViewBag.Title = "About";
}
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({ data: data })
})
</script>
My _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Your script tags need to be inside the Scripts section. Otherwise, you're trying to load them before the libraries they depend on.
#{
ViewBag.Title = "About";
}
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
#section Scripts {
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
...
]
$table.bootstrapTable({ data: data })
})
</script>
}
If you check the developer console in your browser with your current page, you'll see errors telling you that jQuery has not been loaded.
I have with log-messages. And if I want to go to the detailpage. The Id returns always as the value "1".
What do I wrong?
The html-page (view).
#model List<LogBerichtModel>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
#using (Html.BeginForm("DetailInfo", "Home", FormMethod.Post))
{
<div class="container">
<div><h4>Logberichten</h4></div>
<div class="row logs" id="app">
<div class="mt-5 d-flex align-content-xl-stretch flex-column p-5">
<table class="table table-striped m-2">
<thead>
<tr class="bg-primary-custom">
<th>#Html.DisplayNameFor(Model => Model[0].Bericht)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Datum)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Systeem)</th>
<td>#Html.DisplayNameFor(Model => Model[0].Klasse)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Methode)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Systeemmelding):</td>
<td></td>
</tr>
</thead>
#for (var item = 0; item < Model.Count; item++)
{
<tbody>
<tr style='background-color:#(item%2 == 0 ? "#FEF2F4":"#FEE2CA" );'>
<td>#Html.DisplayFor(Model => Model[item].Bericht)</td>
<td>#Html.DisplayFor(Model => Model[item].Datum)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeem)</td>
<td>#Html.DisplayFor(Model => Model[item].Klasse)</td>
<td>#Html.DisplayFor(Model => Model[item].Methode)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeemmelding)</td>
<td>
<input id="id" name="id" type="hidden" value="#Model[item].Id" />
<input class="bg-primary-custom" type="submit" value="Submit" title="DetailInfo" />
</td>
</tr>
</tbody>
}
</table>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
}
</body>
In the controller (id is always 1)
[HttpPost]
public IActionResult DetailInfo(int id)
//public IActionResult DetailInfo(LogBerichtModel logbericht)
{
Your loop is in the form, and your submission action is for the submission of the entire form.
Your form contains all the ids, so when you submit, you submit a collection of ids.
I suggest you use #Html.ActionLink.
Change your View like following.
#model List<LogBerichtModel>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div><h4>Logberichten</h4></div>
<div class="row logs" id="app">
<div class="mt-5 d-flex align-content-xl-stretch flex-column p-5">
<table class="table table-striped m-2">
<thead>
<tr class="bg-primary-custom">
<th>#Html.DisplayNameFor(Model => Model[0].Bericht)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Datum)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Systeem)</th>
<td>#Html.DisplayNameFor(Model => Model[0].Klasse)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Methode)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Systeemmelding):</td>
<td></td>
</tr>
</thead>
#for (var item = 0; item < Model.Count; item++)
{
<tbody>
<tr style='background-color:#(item%2 == 0 ? "#FEF2F4":"#FEE2CA" );'>
<td>#Html.DisplayFor(Model => Model[item].Bericht)</td>
<td>#Html.DisplayFor(Model => Model[item].Datum)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeem)</td>
<td>#Html.DisplayFor(Model => Model[item].Klasse)</td>
<td>#Html.DisplayFor(Model => Model[item].Methode)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeemmelding)</td>
<td>
#Html.ActionLink("DetailInfo", "DetailInfo", "Home", new { id = #Model[item].Id }, null)
</td>
</tr>
</tbody>
}
</table>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
And change your method to get.
[HttpGet]
public IActionResult DetailInfo(int id)
{
}
Test result:
I have already made a table but now i want to make another table below.In that table, the table data will be the same as before (all the row column data will be same) for that i included a js file in my project
i used ajax where i can get instant result.So here is my js code :
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#DT_load').DataTable({
"ajax": {
"url": "/api/book",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name", "width": "30%" },
{ "data": "Author", "width": "30%" },
{ "data": "ISBN", "width": "30%" },
{
"data": "id",
"render": function (data) {
return `<div class= "text-center">
<a href="/BookList/Edit?id=${data}" class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;'>Edit</a>
#nbsp
<a class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;' onClick=Delete('/api/book?id='+${data})>Delete</a>
</div>`
"width" : "30%"
},
}
],
"language": {
"emptyTable": "No Data Found"
},
"width": "100%"
})
}
function Delete(url) {
swal({
title: "Are You Sure?",
text: "Once Deleted You cant never Find it again !",
icon: "warning",
dangerMode: true
}).then((willDelete) => {
if (willDelete) {
$.ajax({
type: "DELETE",
url: url,
success: function (data) {
if (data.success) {
toastr.success(message);
dataTable.ajax.reload();
}
else {
toastr.error(message);
}
}
});
}
});
}
The table i made with html css its showing but when i add this js file it should show me the duplicate table i made before.But its not working
Here is my index file:
#page
#model Crud_App.indexModel
<br />
<div class="container row p-0 m-0">
<div class="col-7">
<h2 class="text-info">Book List</h2>
</div>
<div class="col-3">
<a class="btn btn-info form-control text-center" asp-page="create">Create</a>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.Books.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="Books.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().Author"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().ISBN"></label>
</th>
</tr>
#foreach (var item in Model.Books)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Author)
</td>
<td>
#Html.DisplayFor(m => item.ISBN)
</td>
<td>
<a asp-page="Edit" asp-route-id="#item.Id" class="btn btn-success btn-sm">Edit</a>
<button asp-page-handler="Delete" asp-route-id="#item.Id" onclick="return confirm('Are you Sure You want to delete')" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
}
</table>
}
else
{
<p>No Books Available</p>
}
</form>
</div>
<div class="col-12" style="text-align: center">
<br />
<span class="h3 text-info">OR</span>
<br/>
<div class="col-12 border p-3">
<table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Atuhor</th>
<th>ISBN</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
#section scripts {
<script src ="~/js/BookList.js"></script>
}
I did it like this,
In DataTable, I added
dataSrc
columnDefs
In HTML, I added
4th table header
In backend controller, I am returning a named array booksData on DataTable ajax call
#section scripts {
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#DT_load').DataTable({
"ajax": {
"url": "https://localhost:44333/Home/Data",
"type": "GET",
"datatype": "json",
"dataSrc": "booksData"
},
"columns": [
{ "data": "name", "width": "30%" },
{ "data": "author", "width": "30%" },
{ "data": "isbn", "width": "30%" },
{ "data": "id", "width": "10%" }
],
"columnDefs": [
{
"targets": 3,
"data": "id",
"render": function (data) {
return 'Download';
}
}
],
"language": {
"emptyTable": "No Data Found"
},
"width": "100%"
});
});
</script>
}
#if (Model.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label>#Model.First().Name</label>
</th>
<th>
<label>#Model.First().Author</label>
</th>
<th>
<label>#Model.First().ISBN</label>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Author)
</td>
<td>
#Html.DisplayFor(m => item.ISBN)
</td>
<td>
<a asp-route-id="#item.Id" class="btn btn-success btn-sm">Edit</a>
</td>
</tr>
}
</table>
<div class="col-12" style="text-align: center">
<br />
<span class="h3 text-info">OR</span>
<br />
<div class="col-12 border p-3">
<table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Atuhor</th>
<th>ISBN</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
}
else
{
<p>No Books Available</p>
}
public class HomeController : Controller
{
public IActionResult Index()
{
var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};
return View(books);
}
public IActionResult Data()
{
var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};
return Json(new { booksData = books });
}
I have a table generated from ng-repeat. Each of the row has a checkbox. I want the rows which are checked to change their background color. I was trying it using ng-class but did not help, As soon as I select one checkbox, all the rows get their background changed.I understand what the mistake is, but dont know how to solve it.
This is my table
<table >
<tr>
<th>Select</th>
<th>Job List</th>
<th>Next Firing</th>
</tr>
<tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
<td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
<td style="width: 247px; ">{{ x.Name }}</td>
<td style="width: 247px; ">{{ x.ID }}</td>
</tr>
</table>
This is my controller
$scope.countChecked = function(index){
var count = 0;
angular.forEach($scope.jobs, function(job){
if (job.checked) {
count++;
$scope.myclass='selected';
}
});
return count;
}
I need the "count" for a different purpose, which is working fine.
This is selected css
.selected{
background-color: #DEB887;
}
You can use the ngClass directive to give it a certain class when a job is selected like so:
<ANY ... ng-class="{ 'selected': x.checked }">
...
</ANY>
Just go through below snippet.
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, $filter) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
}
];
$scope.checkedCount = function() {
return $scope.Customers.filter(function(orders) {
return orders.select;
}).length;
}
})
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected {
background-color: #E0F7FA;
}
</style>
</head>
<body style="margin: 30px;">
<div ng-app="MyApp" ng-controller="MyController">
<div class="container-fluid" style="margin-top: 40px;">
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<span style="font-size: 20px; margin-right: 50px;">Total Checked : {{checkedCount()}}</span>
</div>
</div>
<div class="col-md-12">
<table class="table table-condensed table-bordered text-center">
<thead style="background-color: #607D8B; color: white">
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr ng-class="{ 'selected': c.select }">
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I have two Datatables, but now first, it is shown the first table, down after it, it is shown another dataTable. I need to be next to each other. I tried to change position like that: div#example2_wrapper.dataTables_wrapper {
margin-right: 10px;
margin-top: 20px;
} but it doesn't have result.
My code is:
<html>
<head>
<link href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js">
<script src="../../media/js/dataTables.editor.min.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable( {
"pagingType": "full_numbers",
"bSort": false,
"sDom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"csv",
{
"sExtends": "pdf",
"sButtonText": "Print PDF",
"mColumns": "visible"
},
"xls"
]
},
"language": {
"paginate": {
"previous": "Предишна",
"next": "Следваща",
"last": "Последна",
"first": "Първа"
}
}
} );
} );
$(document).ready(function() {
$('table.display').dataTable();
} );
</script>
<script>
$(document).ready(function() {
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Търси '+title+'" />' );
} );
var table = $('#example').DataTable();
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
</script>
</head>
<body>
<div class='col-md-6' >
<?php
$teacher_id = $this->uri->segment(3);
$school_id = $this->uri->segment(4);
echo form_open('admin/edit_students/'.$teacher_id .'/' .$school_id); ?>
<table id="example">
<thead>
<tr>
<th>Ученик</th>
<th>Клас</th>
</tr>
</thead>
<thead class="filters">
<tr>
<td>Ученик</td>
<td>Клас</td>
</tr>
</thead>
<tfoot>
<tr>
<th>Ученик</th>
<th>Клас</th>
</tr>
</tfoot>
<tbody>
<?php
foreach($select_teachers_students as $select)
{
?>
<tr>
<td class='col-md-1'>
<input type="checkbox" name="student[]" value="<?php echo $select->user_id; ?>" />
<?php echo $select->username; ?>
</td><td class='col-md-1'>
<?php echo $select->class;
echo $select->division; ?>
</td>
</tr>
<?php
}
?>
</table>
<input type="submit" name="change" value="Промени ученици" class="btn btn-success" />
</form>
<table id="example2" class="display">
<thead>
<tr>
<th>Ученик</th>
<th>Клас</th>
</tr>
</thead>
<thead class="filters">
<tr>
<td>Ученик</td>
<td>Клас</td>
</tr>
</thead>
<tfoot>
<tr>
<th>Ученик</th>
<th>Клас</th>
</tr>
</tfoot>
<tbody>
<?php
//some data fot the second table
</tbody>
</table>
</div>
</body>
</html>
Try this:
<div style="width: 100%;">
<div style="width: 50%; float: left;">
INSERT TABLE1 HERE
</div>
<div style="width: 50%; float: left;">
INSERT TABLE2 HERE
</div>
</div>