I have a page with a footer that repeats on every page. The main content of the page is a long table of multiple pages.
I need the number of rows per page to be fixed so that it does not overlap my page footer when printing the page.
I have tried page-break-inside: avoid; on the footer but it does not work.
I am using bootstrap of if that helps.
<html>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<body style="padding-top:20px">
<div class="container">
<div class="row">
Header Section
</div>
<br>
<table class="table table-striped table-bordered">
<thead>
<tr style="background-color:yellow">
<th scope="col">S.No</th>
<th scope="col">Item Description</th>
<th scope="col">Qty</th>
<th scope="col">Unit Price</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>CAT 6 Outlet - Optronics CAT6 Single Outlet( Connector + Module + Faceplate)</td>
<td>40</td>
<td>30</td>
<td>5000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Patch Panel - Optronics 24-Port Patch Panel Loaded</td>
<td>10</td>
<td>20</td>
<td>2000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Brush Panel - Optronics Cable Manager Brush</td>
<td>500</td>
<td>10</td>
<td>20000</td>
</tr>
<tr>
<td></td>
<td>Grand Total (AED)</td>
<td></td>
<td></td>
<td>501000.00</td>
</tr>
</tfoot>
</table>
{{!-- Page Footer --}}
<div class="fixed-bottom">
<hr>
**** FOOTER SECTION ****
</div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</html>
Related
My question is quite simple, how do I make this table responsive using twitter bootstrap 4? Below is a JS Fiddle Link.
<div class="some-table-section">
<div class="container">
<table class="table some-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Plan 1</th>
<th scope="col">Plan 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Option 1</th>
<td>$1</td>
<td>$2</td>
</tr>
<tr>
<th scope="row">Option 2</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Option 3</th>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row"></th>
<td><a href="#" class="btn btn-primary">Select this plan</td>
<td><a href="#" class="btn btn-primary">Select this plan</td>
</tr>
</tbody>
</table>
</div>
</div>
What I would like to have is a responsive version of this table such that plan 2 is below plan 1 in the responsive version. PS. You can find the current CSS in the JS Fiddle Link.
You should check Bootstrap Docs: https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables
Simply wrap your table with .table-responsive
Basic example:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can have breakpoint specific responsive table using class table-responsive{-sm|-md|-lg|-xl}
I have a Flask application that takes a bunch of input from the users, processes it and generates a table/matrix of values.
I want to display this table to the user with different colors for different cells. At the time of the table generation I know what color I want the cell to be.
I am using Bootstrap4. Can this be done using Bootstrap?
The class attribute can be used in the table row to get the required colors.
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>ABC</td>
<td>10</td>
</tr>
<tr class="danger">
<td>DEF</td>
<td>20</td>
</tr>
<tr class="info">
<td>GHI</td>
<td>30</td>
</tr>
<tr class="success">
<td>JKL</td>
<td>40</td>
</tr>
<tr class="warning">
<td>MNO</td>
<td>50</td>
</tr>
</tbody>
</table>
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr> elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
This is the way to add color on cells
<!doctype html>
<html lang="en">
<head>
<title>Table Color</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
More about table
table documentation bootstrap 4
First i setup jquery, bootstrap libs and then include footable.min.js, footable.paging.js and footable.sorting.min.js files and also setup stylesheets for that.
So, i can't to use sorting as well as pagination on it.
i am not getting any kind of error in console. whereas i able to used data-breakpoints for various devices and it works for me. i don't know how one features is working and another is not. please help me.
html file
<div class="container-fluid">
<div class="page-header">
<table class="footable table table-hover" data-page-size="3" data-page-navigation=".pagination">
<thead>
<tr>
<th data-toggle="true">Name</th>
<th data-breakpoints="xs sm">Birthday</th>
<th data-breakpoints="xs">City</th>
<th>Donation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sade Morgan</td>
<td>10/03/1990</td>
<td>Ede</td>
<td>$4,653</td>
</tr>
<tr>
<td>Knox Sutton</td>
<td>06/29/1966</td>
<td>Bressoux</td>
<td>$4,563</td>
</tr>
<tr>
<td>Rooney Preston</td>
<td>12/12/2002</td>
<td>Patalillo</td>
<td>$3,222</td>
</tr>
<tr>
<td>Fulton Wilkerson</td>
<td>01/24/1986</td>
<td>Haren</td>
<td>$2,841</td>
</tr>
<tr>
<td>Azalia Long</td>
<td>11/21/1988</td>
<td>Gressoney-Saint-Jean</td>
<td>$4,631</td>
</tr>
<tr>
<td>Erich Burris</td>
<td>10/26/1966</td>
<td>Pulle</td>
<td>$2,519</td>
</tr>
<tr>
<td>Kadeem Sharpe</td>
<td>08/24/1976</td>
<td>Ekeren</td>
<td>$1,440</td>
</tr>
<tr>
<td>Rose Wilcox</td>
<td>11/05/2003</td>
<td>Aparecida de Goiânia</td>
<td>$2,188</td>
</tr>
<tr>
<td>Hu Gibson</td>
<td>02/18/1994</td>
<td>Raigarh</td>
<td>$4,286</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(".footable").footable();
});
</script>
I'm using Bootstrap tables to make a Gantt chart. My for times are the same width. For the I have set the colspan="15" and inside of that I am putting a div and setting it to the width that I want. What I want is the vertical borders from the to continue through the entire body of the table, even though the is a different width. Is this possible? Here is my code:
<div class="table-responsive gantt-chart">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
And here is a screenshot of what it looks like:
The black lines I've drawn on there to indicate what I want to do with each section. I'm not sure if this is possible or if I will need to find another way. I'm using php to input the blue divs in the correct locations to match up to the time listed.
As the previous solution (see below) fails in some cases, and you have already added jQuery to the project (needed by Bootstrap), here is another example of how it could be done with JavaScript and that may be better:
Add the vertical bars dynamically (they could be divs)
Place them behind the table
Set the position according to each row
Readjust their position when the page is resized.
Something like this (you can also see it on this JSFiddle):
function setVerticalBars() {
var x = 0;
// for each cell with a .time class
$(".time").each(function() {
// create the vertical line if it doesn't exist
if (!$("#vertical-bar-" + x).length) {
$(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
}
// select the vertical bar associated to this cell
var bar = $("#vertical-bar-" + x);
// place it in he same position as the cell
bar.css("left", $(this).position().left);
// increase the counter to avoid duplicated id's
x++;
});
}
// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
.mygantt .vertical-bar {
width:1px;
background:rgba(0,0,0,0.1);
position:absolute;
top:0;
bottom:0;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-chart {
position:relative;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart mygantt">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
This solutions adjust betters to the table and the changes that could happen when the user resizes the window. I think it's better than the previous one, but I'll leave the old one below for reference.
EDIT - Previous solution:
As I mentioned in the comments, one possible solution would be to add a background image to the table that mimics the vertical lines. That can be achieved with this:
.mytable {
background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}
Now you need to fix one more issue: the Bootstrap table-stripped style has one row transparent and the next one gray. You will be able to see the vertical lines through only the even rows but not through the odd ones. To fix this, change the background of the odd lines from gray to a semitransparent color:
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
And that should do the trick. You can see a demo on this JSFiddle: http://jsfiddle.net/8su2cr5m/
One problem with this solution: the background image will work as long as the cells have the expected width; if they don't (e.g.: when the table would occupy more than 100%, the cells may be resized so the table fits in the available space). A solution for this could be to calculate the width in JS and resize the background image accordingly.
Here's the full code for your case (you can see the issue that I specified in the paragraph above, but if you go full-screen then the issue is gone):
/* set the table background to mimic the vertical bars bars */
.mytable {
background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
function setVerticalBars() {
var x = 0;
// for each cell with a .time class
$(".time").each(function() {
// create the vertical line if it doesn't exist
if (!$("#vertical-bar-" + x).length) {
$(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
}
// select the vertical bar associated to this cell
var bar = $("#vertical-bar-" + x);
// place it in he same position as the cell
bar.css("left", $(this).position().left);
// increase the counter to avoid duplicated id's
x++;
});
}
// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
.mygantt .vertical-bar {
width:1px;
background:rgba(0,0,0,0.1);
position:absolute;
top:0;
bottom:0;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-chart {
position:relative;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart mygantt">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
I wanted a html page which has a html header and a table header to have non scrollable feature. Only the table contents should be scrollable.
For ex:
<html>
<body>
<h1>header</h1>
<h1>header2</h1>
<table>
<thead>
<tr>
<th>name</th>
</tr>
<tr>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Venkat</td>
</tr>
<tr>
<td>bangalore</td>
</tr>
//this part will be repeating
</tbody>
</table>
</body>
</html>
I want only the contents in the table body to be scrollable.
I had referred the following link also How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
But i cannot use the div to only contain headers and table header..
I have created a fiddle with a situation similar to mine. Please have a look http://jsfiddle.net/VenkateshManohar/bU7NN/
You will can find a jQuery plugin here that will do it for you ;)
You can try like this: LINK
HTML Code:
<div class="dataGridHeader">
<div class="dataGridContent">
<table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
<thead>
<tr>
<th width="160">Shopper Name</th>
<th width="160">First Name</th>
<th width="160">Last Name</th>
<th width="160">User ID</th>
<th width="160">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td width="160">C2C Fishing</td>
<td width="160">John</td>
<td width="160">Doe</td>
<td width="160">C2C Fishing</td>
<td width="160">Enabled</td>
</tr>
.
.
.
.
</tbody>
</table>
</div>
</div>
Hope this helps