I have recently started to learn to use bootstrap with Mvc4 and have the following problem:
I am trying to make a standard layout that will look something like this:
the navbar is in a layout.
the view that contains the content is:
#model BootstrapTest4.Models.Menu
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>
the browsers render this in the following way:
this is the source from the browser:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>
</div>
<div id="Footer">
Insert footer
</div>
</div>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
so it appears that i was using the wrong class for the columns.
instead of span2 i should have used col-md-2 and so on.
the view ended up looking like this:
#model BootstrapTest4.Models.Menu
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="col-md-2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="col-md-4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>
Related
Since other provided solutions (also I want to avoid jQuery like this solution: stackoverflow) to this topic are not working for my case, I opened a new question. How can I make the table header fixed on vertical scroll?
<!-- 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">
<div class=container>
<div class=row>
<div class=col-sm-12>
<div class="table-responsive">
<table class="table table-condensed table-bordered table-hover fixed_headers">
<thead>
<tr>
<th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
<th rowspan="2">ID</th>
<th rowspan="2">Name</th>
<th colspan="4">r 1</th>
<th colspan="4">r 2</th>
<th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
</th>
<th rowspan="2">ERW
</th>
<th rowspan="2"><span class="text-muted">Radar</span></th>
<th rowspan="2"><span class="text-muted">RISS</span></th>
</tr>
<tr>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ffubfhiuwefuh
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbbjiodeijoew
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">100</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
$(function () {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count
$table.css({width: tableWidth});
$tableNew
.attr("class", $table.attr("class"))
.css({width: tableWidth});
$head.css({background: '#fff'});
$.each($headTds1, function (index, value) {
var $headTd = $(value);
var colspan = $headTd.attr('colspan') || 0;
if (colspan) {
while (colspan) {
addwidth($($headTds2[cl]), $($bodyTds[index+cl-cc]));
colspan--
cl++
}
cc ++;
} else {
addwidth($headTd, $($bodyTds[index+cl-cc]));
}
});
function addwidth($headTd, $bodyTd) {
var headTdwidth2 = $headTd.outerWidth();
var bodyTdwidth2 = $bodyTd.outerWidth();
var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;
$bodyTd.css({'width': width2});
$headTd.css({'width': width2});
var headTdwidth = $headTd.width();
var bodyTdwidth = $bodyTd.width();
var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
$bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
$headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}
$head.appendTo($tableNew);
$tableNew.insertBefore($table);
$table.css({'margin-top': $tableNew.height()});
$tableNew.css({position: 'fixed'});
$window.scroll(reLeft);
$window.resize(reLeft);
function reLeft() {
$tableNew.css({left: $table.offset().left - $window.scrollLeft()});
}
});
body{
overflow-x: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table table-condensed table-bordered table-hover fixed_headers">
<thead>
<tr>
<th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
<th rowspan="2">ID</th>
<th rowspan="2">Name</th>
<th colspan="4">r 1</th>
<th colspan="4">r 2</th>
<th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
</th>
<th rowspan="2">ERW
</th>
<th rowspan="2"><span class="text-muted">Radar</span></th>
<th rowspan="2"><span class="text-muted">RISS</span></th>
</tr>
<tr>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ffubfhiuwefuh
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbbjiodeijoew
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">100</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
You can get it with the help of css itself, You can add the following in your css,
thead {
display: table;
width: calc( 100% - 1em );
table-layout: fixed;
}
tbody {
display: block;
height: 240px;
overflow: auto;
}
If you don't wish to give the styles to thead and tbody , You can also give a class to it and then you can use the above css code..
Here is the jsfiddle link that works as per your requirement,
https://jsfiddle.net/t0vek036/
You could use the CSS attribute position: fixed;.
I added it to the table <thead> inline. Do keep in mind it is better to use a seperate stylesheet. Next to that you'll have to do some style fixing over the header of the table so that it connects to the table <tbody> in the correct way. I would like to help you with it if you want to.
Look at the JSfiddle
Since the body was too long i had to put it in a seperate JSfiddle. Just copy and paste the code.
Hope this helps!
You can put your table in a vertical scrolling text area using following methods:
Method 1
<style>
.divScroll{
white-space: nowrap;
overflow-y: scroll;
font-size:14px;
height:200px;
width:auto;
background-color:#bdbdbd;
}
</style>
<div class="divScroll">
"INSERT TABLE HERE"
</div>
Method 2
<div style="border: 1px solid black; overflow-y: auto; white-space: nowrap; height: 200px; width: auto; color: black; background-color: white;">
"INSERT TABLE HERE"
</div>
I believes you are asking about vertical scrolling of entire table...
I have a table:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="3">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="1">UD_UU_PKG</td>
<td></td>
<td colspan="1">SHORT_CYCL</td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td>
</td>
<td>
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</tr>
</table>
Currently it looks like this:
I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").
What am I doing wrong and how do I fix it?
EDIT: This is what I get with Banzay's recommendations:
You need to plan the table that contains of 4 cells in each row, than set colspan respectively.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>
Just play with colspans:
<table>
<tr>
<th colspan="6">
DRUG INFO
</th>
</tr>
<tr>
<td colspan="2">Effective date</td>
<td colspan="2">Minimum order</td>
<td colspan="2">Total package</td>
</tr>
<tr>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<tr>
<td colspan="3">UD_UU_PKG</td>
<td colspan="3">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="3">
<input type="text">
</td>
<td colspan="3">
<input type="checkbox">
</td>
</tr>
</table>
And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.
I've data inside a bootstrap table. As the rows increases, the header will be out of sight on vertical scroll. So I need to fix the header of the bootstrap table with table body vertical scrollable. Also,the horizontal scroll for the whole table when columns exceed in the page.
Reference implementation without bootstrap.This is implemented by using two tables. One for header and the other for body.
I've the following data which is similar to my original data.
NOTE:I am not using any col-*-* for table's td. Because my header columns are more than 12. And may increase up to 15. So I don't use the column classes.
HTML
<tbody>
<tr>
<th style="cursor: pointer;">
ABCD
</th>
<th style="cursor: pointer;">
Asadh uysdsgh
</th>
<th style="cursor: pointer;">
ghdsgsh sdfsdjsd
</th>
<th style="cursor: pointer;">
sdagfh sdhfsjk
</th>
<th style="cursor: pointer;">
sdhfasgh sdjkj
</th>
<th style="display: none; cursor: pointer;">
shadfj sjdskdl
</th>
<th style="cursor: pointer;">
sddgjgfhgshdf skldj
</th>
<th style="cursor: pointer;">
sdfsffsd sdfsd
</th>
<th style="cursor: pointer;">
sdfsd sdfsd
</th>
<th style="cursor: pointer;">
fhgdd sdg sfs fsfsffsd sdfffs
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
sfgasad sdfjhjshj
</th>
<th style="cursor: pointer;"></th>
</tr>
<tr>
<td>
579852
</td>
<td>
21June_The hhjhj bhjhhkj
</td>
<td>
US jhgg
</td>
<td>
sdafss
</td>
<td>
sdfsdfssd
</td>
<td style="display: none;">
No
</td>
<td>
sfdf ,sdffssd,sdfhshdj,
</td>
<td>
Acsadfds
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sfasd
</td>
<td>
06/30/2016
</td>
<td>
sdasd
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579850
</td>
<td>
sdfff sdfabsd sjd </td>
<td>
US asdfd
</td>
<td>
sdfsdsdsd
</td>
<td>
sdfsfdfas
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf,
</td>
<td>
sdfsdsda
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
07/04/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579893
</td>
<td>
sdhafasdjfj sdhfasdsf sdfha sdfsfh
</td>
<td>
US sdfsdfgl
</td>
<td>
dfsjsdsd
</td>
<td>
sdfdfjk
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
sdfgagf
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/28/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
545554
</td>
<td>
jhsdfg sdfhh sdafjh
</td>
<td>
US sdfhhdf
</td>
<td>
sdfadilgf
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
08/08/2003
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579892
</td>
<td>
sadfs asdfhds dbsh dfsdh
</td>
<td>
US tadil
</td>
<td>
sddftadil
</td>
<td>
fftadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
tadil fsddf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579855
</td>
<td>
jsdhfsdfb dfs bsdhfdjs bsdhbh
</td>
<td>
US tadil
</td>
<td>
sdftadil
</td>
<td>
fjtadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
</td>
<td>
06/21/2016
</td>
<td>
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579851
</td>
<td>
asdhshj- jd dsjsh jjsd
</td>
<td>
US tadil
</td>
<td>
tadil
</td>
<td>
Retail
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579842
</td>
<td>
Test sdhfhad bsdbh
</td>
<td>
US English
</td>
<td>
Internal
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdfffa ,dsjfjs,
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdafsfsd
</td>
<td>
07/01/2016
</td>
<td>
asdff
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
</tbody>
</table>
</div>
Fiddle
Fiddle by using the provided link of the original question.
Just look at the above fiddle, when there are more headers,table gets distorted.
Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview
Is it possible in CSS using a property inside an #page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?
This is what the THEAD element is for. Official docs here.
Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
Opera 7.5 and IE 5 won't repeat headers no matter what you try.
(source)
Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)
UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
Original Answer (2012):
Before you implement this solution it's important to know that Webkit currently doesn't do this.
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..
how do i print HTML table. Header and footer on each page
Also Work in Webkit Browsers
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
}
thead
{
display: table-header-group;
}
tfoot
{
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead
{
display: block;
}
tfoot
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
header comes here for each page
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
</tr>
<tr>
<td>
10
</td>
</tr>
<tr>
<td>
11
</td>
</tr>
<tr>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
</tr>
<tr>
<td>
14
</td>
</tr>
<tr>
<td>
15
</td>
</tr>
<tr>
<td>
16
</td>
</tr>
<tr>
<td>
17
</td>
</tr>
<tr>
<td>
18
</td>
</tr>
<tr>
<td>
19
</td>
</tr>
<tr>
<td>
20
</td>
</tr>
<tr>
<td>
21
</td>
</tr>
<tr>
<td>
22
</td>
</tr>
<tr>
<td>
23
</td>
</tr>
<tr>
<td>
24
</td>
</tr>
<tr>
<td>
25
</td>
</tr>
<tr>
<td>
26
</td>
</tr>
<tr>
<td>
27
</td>
</tr>
<tr>
<td>
28
</td>
</tr>
<tr>
<td>
29
</td>
</tr>
<tr>
<td>
30
</td>
</tr>
<tr>
<td>
31
</td>
</tr>
<tr>
<td>
32
</td>
</tr>
<tr>
<td>
33
</td>
</tr>
<tr>
<td>
34
</td>
</tr>
<tr>
<td>
35
</td>
</tr>
<tr>
<td>
36
</td>
</tr>
<tr>
<td>
37
</td>
</tr>
<tr>
<td>
38
</td>
</tr>
<tr>
<td>
39
</td>
</tr>
<tr>
<td>
40
</td>
</tr>
<tr>
<td>
41
</td>
</tr>
<tr>
<td>
42
</td>
</tr>
<tr>
<td>
43
</td>
</tr>
<tr>
<td>
44
</td>
</tr>
<tr>
<td>
45
</td>
</tr>
<tr>
<td>
46
</td>
</tr>
<tr>
<td>
47
</td>
</tr>
<tr>
<td>
48
</td>
</tr>
<tr>
<td>
49
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
<tr>
<td>
51
</td>
</tr>
<tr>
<td>
52
</td>
</tr>
<tr>
<td>
53
</td>
</tr>
<tr>
<td>
54
</td>
</tr>
<tr>
<td>
55
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
class="button" />
</form>
</body>
</html>