I need the scroll bar to appear in the first div if its contents are higher than the screen size. And the second div was stretched along the height of the screen.
How can I add a scrollbar to the first div?
overflow: scroll; does not work.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
padding: 0;
}
.container-fluid{
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid d-flex">
<div class="row flex-fill">
<div class="col-6" style="overflow: scroll;">
<form>
<table class="table">
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="col-6 bg-success">
</div>
</div>
</div>
In order for the scroll to work, you need to limit the div to a fixed height, or at least some height that will be less than the height of the content inside this div.
For exampel:
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid d-flex">
<div class="row flex-fill" style="height: 200px;">
<div class="col-6" style="overflow: scroll;height: 100%;">
<form>
<table class="table">
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="col-6 bg-success">
</div>
</div>
<script type="text/javascript">
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div></body>
Or, in some other way, indicate the height of the block in which the scroll should be turned on.
Related
I have two tables that are meant to be shown side by side.
When the width of the first table is large (but still small enough to fit both side by side) the second table is shown below it.
Is there a way to show them side by side and only drop down if the screen width is too small?
Here is my code:
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Students</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
</tr>
<tr>
<td>lilyliam</td>
<td>Lily</td>
<td>Liam</td>
</tr>
<tr>
<td>gracenoah</td>
<td>Grace</td>
<td>Noah</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>William</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>Williamsssssssssssssssssss</td>
</tr>
</table>
</div>
<div class="col-sm">
<h3>Teachers</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
<td>Type</td>
</tr>
<tr>
<td>johnsmith</td>
<td>John</td>
<td>Smith</td>
<td>ADMIN</td>
</tr>
<tr>
<td>williamjoseph</td>
<td>William</td>
<td>Joseph</td>
<td>teacher</td>
</tr>
<tr>
<td>franksmith</td>
<td>Frank</td>
<td>Smith</td>
<td>teacher</td>
</tr>
</table>
</div>
</div>
</div>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
All other css comes from bootstrap
Thanks
I am assuming that you are using the official bundle of css provided by Bootstrap. To align table's side by side you can do something like:
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Table 1</h1>
// Table 1 Here
</div>
<div class="col-md-6">
<h1>Table 2</h1>
// Table 2 Here
</div>
</div>
</div>
Hope this works for you.
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>
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>
My goal is to put two tables side by side. I've followed following guide: https://stackoverflow.com/a/11690480/2402577
<table style="float: left;">
My example code:
<div class="container" id="coverpage">
<div class="row">
<table id="tableblock" class="display" width="100%" style="float:left"><caption><h3>Latest Blocks</h3></table>
<table id="tabletxs" class="display" width="100%" style="float:left"><caption><h3>Latest Transactions</h3></table>
</div>
</div>
Table's output:
As you can see the tables not places side by side. I am not sure what I did wrong. How could I fix this issue?
With valuable advices it seems working but now table's height is pretty small. Done changes: <div class="col-md-10"> added, width removed: This works but now tables height is not symmetric and long enough.
<div class="container" id="coverpage">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table id="tabletxs" class="display"><caption><h3 style="color:black;">Latest Transactions</h3></caption></table>
</div>
</div>
</div>
Output:
You have given table width as 100%; so it will take its full width though you have given float:left
I have reduced your table width by 50%.
<div class="container" id="coverpage">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table id="tableblock" class="display" width="50%" style="float:left"><caption><h3>Latest Blocks</h3></caption>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table id="tabletxs" class="display" width="50%" style="float:left"><caption><h3>Latest Transactions</h3></caption>
</table>
</div>
</div>
</div>
Hope this helps.
This is how you do it the Bootstrap way. It will show the tables side by side on middle to big screens and below each other on small screens.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="coverpage">
<div class="row">
<div class="col-md-6 col-sm-12">
<table id="tableblock" class="table">
<caption>Latest Blocks</caption>
<tr><td>cell</td></tr>
</table>
</div>
<div class="col-md-6 col-sm-12">
<table id="tabletxs" class="table">
<caption>Latest Transactions</caption>
<tr><td>cell</td></tr>
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>abc</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<style>
</style>
<body>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="coverpage">
<div class="row">
<div class="col-sm-6">
<table id="tableblock" class="table">
<caption>Latest Blocks</caption>
<tr><td>cell</td></tr>
<tr><td>cell</td></tr>
<tr><td>cell</td></tr>
</table>
</div>
<div class="col-sm-6">
<table id="tabletxs" class="table">
<caption>Latest Transactions</caption>
<tr><td>cell</td></tr>
<tr><td>cell</td></tr>
<tr><td>cell</td></tr>
</table>
</div>
</div>
</div>
</body>
If you try width: 50%; in style, I think you can achieve what you want. Here is an hardcoded example of width: 50%;.
If you are using bootstrap then there are classes available to position things in GRID style. Here you can read about it.
<!DOCTYPE html>
<h1 style="float: left; width: 50%;">Table1</h1>
<h1 style="float: right; width: 50%;">Table2</h1>
<table id="table1" style="float: left; width: 50%;border: solid black 1px;">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<table id="table2" style="float: left; width: 50%; border: solid blue 1px;">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
I am brand new to front end HTML and trying to construct a table identical to the below example whereby I have cell numbering identical to this.
My code as it stands when rendered looks like this.
I am struggling to figure out how I achieve the cell numbering. I have done a few things but it looks out of sorts. Is this done via colspan.
<table border="1">
<tr>
<td>Bruce Springsteen Born To Run</td>
<td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<tr>
<td>Night</td>
<td>3.00</td>
</tr>
<td>Backstreets</td>
<td>6.29</td>
</tr>
<tr>
<td>Born To Run</td>
<td>4.29</td>
</tr>
<tr>
<td>She's the one</td>
<td>4.29</td>
</tr>
<tr>
<td>Meeting Across The River</td>
<td>3.15</td>
</tr>
<tr>
<td>Jungleland</td>
<td>9.33</td>
</table>
<table border="1">
<tr>
<td>1</td>
<td>Bruce Springsteen Born To Run</td>
<td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>2</td>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>3</td>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<tr>
<td>4</td>
<td>Night</td>
<td>3.00</td>
</tr>
<td>5</td>
<td>Backstreets</td>
<td>6.29</td>
</tr>
<tr>
<td>6</td>
<td>Born To Run</td>
<td>4.29</td>
</tr>
<tr>
<td>7</td>
<td>She's the one</td>
<td>4.29</td>
</tr>
<tr>
<td>8</td>
<td>Meeting Across The River</td>
<td>3.15</td>
</tr>
<tr>
<td>9</td>
<td>Jungleland</td>
<td>9.33</td>
</table>
You can use this and add 1 column to it and you can get what you want.
You can use Bootstrap and make it responsive as well, if you need more info search here, example:
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:yellow;">
Bruce Springsteen Born To Run
</div>
<div class="col-xs-6" style="background-color:pink;">
<img src="images/borntorun.jpg" alt="bruce springsteen">
</div>
</div>
<div class="row">
<div class="col-xs-2" style="background-color:yellow;">
1
</div>
<div class="col-xs-5" style="background-color:pink;">
Thunder Road
</div>
<div class="col-xs-5" style="background-color:pink;">
4.47
</div>
<div class="col-xs-2" style="background-color:yellow;">
2
</div>
<div class="col-xs-5" style="background-color:pink;">
10th Avenue Freeze Out
</div>
<div class="col-xs-5" style="background-color:pink;">
3.10
</div>
</div>
</div>
</body>
</html>
You can use colspan to do it.
<table border="1" width="100%">
<tr>
<td colspan="2">Bruce Springsteen Born To Run</td>
<td><img src="http://www.trait-tech.com/uploads/T-TOOL-9406__Acrylic-Mirror-Effect-3d-Wall-Decals-Flower-Shaped-Mirrors-Stickers-Pack-of-5-Set-for-Halloween-Chirstmas-Valentine-.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<!--Other rows here-->
</table>