Convert HTML with CSS3 to PDF in Java - html

I am generating invoices dynamically using thymeleaf and HTML and have used bootstrap 5 to lay out the whole thing which uses CSS3 but when I need to generate a PDF from HTML, everything works fine but the layout gets messed up as the used library doesn't support CSS3.
I have tried using flying saucer, and openhtmltopdf-pdfbox but none of them gives the desired results.
Generated HTML From thymeleaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<link rel="stylesheet" href="templates/css/bootstrap.min.css">
<style media="all">
:root {
--primary-color: #E01B33;
}
.theme-background-color {
background-color: var(--primary-color);
}
.theme-text-color {
color: var(--primary-color);
}
tfoot {
border-bottom: 0;
}
</style>
</head>
<body>
<div class="px-4" id="container">
<div class="row">
<div class="col">
<h2 class="fw-bold">ABC</h2>
<br/>
<h3>asdasdsad</h3>
<br/>
<text>Phone Number:- asdasdasd</text>
<br/>
<text>Email:- sadasdasd</text>
<br/>
<text>Gst No.:- asdasdasdas</text>
</div>
</div>
<h1 class="text-center mt-4 fw-bold theme-text-color">Sale Invoice</h1>
<div class="row mt-4">
<div class="col">
<text class="fw-bold">Bill to:</text>
<br/>
<text class="fw-bold">asdasdasd</text>
<br/>
<text>asdasdasda</text>
<br/>
<text>Customer Number:- asdsadasd</text>
</div>
<div class="col text-end">
<text class="fw-bold">Invoice No:- 1</text>
<br/>
<text class="fw-bold">Invoice Date:- 20/7/2022</text>
</div>
</div>
<div>
<table class="table table-striped table-hover mt-4">
<tr class="theme-background-color">
<th>#</th>
<th>HSN</th>
<th>Name</th>
<th>Quantity</th>
<th>Price/Unit</th>
<th>Discount</th>
<th>GST</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>Apple</td>
<td>10</td>
<td>₹ 100</td>
<td>₹ 100(10)</td>
<td class="text-wrap">₹ 45(GST%5)</td>
<td>₹ 945</td>
</tr>
<tfoot class="border-bottom border-dark ">
<tr>
<td colspan="3" class="fw-bold">Total</td>
<td colspan="3" class="fw-bold">10</td>
<td class="fw-bold">45</td>
<td class="fw-bold">945</td>
</tr>
</tfoot>
</table>
</div>
<div class="row mt-4">
<div class="col">
<table class="table table-striped">
<tr>
<td class="fw-bold text-muted">TERMS AND CONDITIONS</td>
</tr>
<tr>
<td class="fw-bold text-muted">Hello terms</td>
</tr>
</table>
</div>
<div class="col">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td>₹ 1,000</td>
</tr>
<tr class="theme-background-color">
<td class="fw-bold">Total</td>
<td class="fw-bold">₹ 945</td>
</tr>
<tr>
<td>Received</td>
<td>₹ 400</td>
</tr>
<tr>
<td>Balance</td>
<td>₹ 545</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Java Code to generate PDF
public void generatePDF(FileOutputStream outputStream, String html) throws IOException {
PdfRendererBuilder pdfBuilder = new PdfRendererBuilder();
pdfBuilder.useFastMode();
pdfBuilder.withUri("path/to/pdf.file");
pdfBuilder.toStream(outputStream);
pdfBuilder.run();
// ITextRenderer renderer = new ITextRenderer();
// renderer.setDocumentFromString(html);
// renderer.layout();
// renderer.createPDF(outputStream, false);
// renderer.finishPDF();
}
Pom.xml
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-pdf-openpdf</artifactId>
<version>9.1.22</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-java2d</artifactId>
<version>1.0.10</version>
</dependency>

Related

Not able to filter table with multiple rows

FACING ISSUE IN CREATING MULTIPLE TABLE FILTERS IN HTML TABLE.
Following is the HTML code wherein I'm trying to filter out data on the basis of 3 columns(here, table has a total of 4 columns). The last column is just a URL hence doesn't need filtering.
But the filters aren't working.
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I have tried all the things here, but still the code isn't working. I'd be glad if someone could help to resolve this issue as soon as possible.

This might work:
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
We put all you javascript inside $(document).ready(function() {}); In this way, html table object is rendered, and ready to be filtered.
And also I suggest you to use the last jQuery code, that is at our day, jquery 3.6.0.

Can't make my header fixed whilst my table is scrollable

My code works almost as I want it however after some research and trying I finally made my table scrollable however I can't seem to make the header stay fixed no matter what I try, could someone be able to help?
I need the header to be fixed so you can still see the headings when you scroll down the table of course.
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>

Add to th
position:sticky;
top:0;
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.my-custom-scrollbar table th {
background:#b8daff;
position:sticky;
top:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>

You can use the following css with a little bit of js :
CSS
.sticky {
position: fixed;
top: 0;
width: 100%;
}
JS
window.onscroll = function() {stickyHeaderFunction()};
var header = document.getElementById("your_header");
var sticky = header.offsetTop;
function stickyHeaderFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}

You just have to use the th(header) to stick.
th {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Demo:
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
th {
background: #B8DAFF;
position: sticky;
top: 0;
}
.table {
border-collapse: separate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>

Electron Layout With Bootstrap 4 Grid Problem

I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?

I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>

how to add scrollbar to the table body when table rows reaches more than 5?

Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.

Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>

You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>

How to make scrollable html table columns responsive using bootstrap

I'm not a web designer. I was trying to design a web layout with some scrollable columns which contains some data in the form of anchor tags which are loaded dynamically. I've designed a html table structure along with a style sheet to achieve this. Source code of this table is as shown below
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<!--1st COLUMN TO HOLD COUNTRY NAMES -->
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<!--2nd COLUMN TO HOLD CURRENCY NAMES -->
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<!--3rd COLUMN TO HOLD SECTOR NAMES -->
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
And the CSS styling for class coulmn is as shown below
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
And CSS styling for class for titles is as given below
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
This works fine, but the issue with this setup is it's not responsive. I've interagted bootstrap within my application. Is there any way to make this setup more responsive using bootstrap? Please help.

To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td>Lorem ipsum dolor sit amet…</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Vestibulum consectetur scelerisque…</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Integer pulvinar leo id risus…</td>
</tr>
</tbody>
</table>
</div>
see working ex here

View this example. add bootstrap headers and responsive class to the divs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

There are way to change the td to div by using jQuery and css but not easy and you need to write different css for every table in your application, for more detail see this
If you don't want to write css use RAHUL suggestion for scroll-able table for smaller screen by using bootstrap.