I have the following html with a responsive table.
When the page is accessed via mobile, the user has to scroll horizontally to view the entire content, is there a bootstrap way to break the columns vertically so a mobile user does not have to scroll horizontally ?
<!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/3.3.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"> <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>
The last example here (No More Tables) shows the desired behavior perfectly https://elvery.net/demo/responsive-tables/
though it is not done with bootstrap.
If anyone can shed light on how to achieve this with bootstrap, ill appreciate.
<!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/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>
.table-responsive{
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
</style>
<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>
no need to do anything only put css as i putted on style tag that work perfectly
i hope this work good.
thanks.
Use this way
#media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225, 181, 71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child,
table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
<table class="table" id="customDataTable">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/lalji1051/ztrjqvL8/
An alternative solution is to use Bootstrap.
HTML:
<div class="col-md-1 " style="padding-top:10%">
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
Compare Editions
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Lite
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Standard
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Premium
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Professional
</div>
</div>
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
Monthly Flat Rate
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>Free</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$40/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$50/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$60/Month
</p>
</div>
</div>
</div>
The key is then just stylizing it to look like a table
#pricing-detailed-section .feature-comparison-table-header-cell {
padding: 15px;
border: 1px solid #DFE1E5;
font-size: 1rem;
padding-top: 40px;
height:100px;
}
#pricing-detailed-section .bold {
font-weight:600;
}
#pricing-detailed-section .feature-comparison-table-cell {
height: 100px;
border: 1px solid
#DFE1E5;
background-color:#FFF;
display: table;
}
#pricing-detailed-section .feature-comparison-table-cell p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
When you switch to mobile, it'll fit everything vertically. Note the code for the paragraph section solves multi-line fields not being centered.
Related
I have browsed some of the answers and tried the solutions out but I am still not getting the results.
I want to set a different margin for different breakpoints in bootstrap-for example:
Laptop view fix,
tablet view
It probably has something to do with the set widths as well, but I just didn't know how to make everything work in width as well as have margin look good on all screen sizes.
This is my code :
.container {
max-width: 25rem;
text-align: center;
padding: 0rem;
margin: 1rem 0.4rem;
}
.table.table.table-borderless {
margin-bottom: 0rem;
}
.table.table.table-borderless td,
.table.table-dark.table-borderless td {
padding: 0rem;
}
table.statistic-employment,
table.statistic-requirement {
width: 24.8rem;
}
.statistic-requirement {
height: 10 rem;
}
.col-12.col-md-6.col-xl-4 {
padding: 0rem 0rem;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="main-container">
<div class="row">
<div class="col-12 col-md-6 col-xl-4 ">
<!--Prva kartica-->
<div class="container">
<table class="table table-borderless" style="background-color: thistle;">
<tbody>
<tr>
<td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-borderless">
<tbody>
<tr>
<td>Zaprimljeno zahtjeva</td>
</tr>
<tr>
<td style="font-size: 5.5rem;">4979</td>
</tr>
<tr>
<td>poslano</td>
</tr>
<tr>
<td>17.4.2020. do 12h</td>
</tr>
</tbody>
</table>
<table class="table table-borderless" style="background-color: thistle; font-weight: 700;">
<tr>
<td>Osobna provjera</td>
<td>SMS obavijest</td>
<td>Kontakt centar</td>
</tr>
<tr>
<td style="font-size: 2.5rem;">6243</td>
<td style="font-size: 2.5rem;">2322</td>
<td style="font-size: 2.5rem;">230</td>
</tr>
</table>
<div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
<h6>Po statusu zaposlenosti</h6>
<table class="statistic-employment">
<tr>
<td>EMPLOYED</td>
<td>6308</td>
</tr>
<tr>
<td>PENSIONER</td>
<td>251</td>
</tr>
<tr>
<td>PENSIONER_EMPLOYED</td>
<td>34</td>
</tr>
<tr>
<td>UNEMPLOYED</td>
<td>952</td>
</tr>
<tr>
<td>UNEMPLOYED_COVID</td>
<td>1090</td>
</tr>
</table>
</div>
<div class="statistic-requirement" style="background-color: rgb(238, 189, 223); height: 9.8rem;">
<h6>Broj upisanih po danu</h6>
<table class="statistic-requirement">
<tr>
<td>datum</td>
<td>dan</td>
<td>zahtjeva</td>
</tr>
<tr>
<td>06.04.</td>
<td>ponedjeljak</td>
<td>2640</td>
</tr>
<tr>
<td>07.04.</td>
<td>utorak</td>
<td>1205</td>
</tr>
<tr>
<td>08.04.</td>
<td>srijeda</td>
<td>700</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<!--Druga kartica-->
<div class="container">
<table class="table table-borderless" style="background-color: thistle;">
<tr>
<td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
</tr>
</table>
<table class="table table-dark table-borderless">
<tr>
<td>Zaprimljeno zahtjeva</td>
</tr>
<tr>
<td style="font-size: 5.5rem;">4979</td>
</tr>
<tr>
<td>poslano</td>
</tr>
<tr>
<td>17.4.2020. do 12h</td>
</tr>
</table>
<table class="table table-borderless" style="background-color: thistle; font-weight: 700;">
<tr>
<td>Osobna provjera</td>
<td>SMS obavijest</td>
<td>Kontakt centar</td>
</tr>
<tr>
<td style="font-size: 2.5rem;">6243</td>
<td style="font-size: 2.5rem;">2322</td>
<td style="font-size: 2.5rem;">230</td>
</tr>
</table>
<div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
<h6>Po statusu zaposlenosti</h6>
<table class="statistic-employment">
<tr>
<td>EMPLOYED</td>
<td>6308</td>
</tr>
<tr>
<td>PENSIONER</td>
<td>251</td>
</tr>
<tr>
<td>UNEMPLOYED</td>
<td>952</td>
</tr>
<tr>
<td>UNEMPLOYED_COVID</td>
<td>1090</td>
</tr>
</table>
</div>
<div class="statistic-requirement" style="background-color: rgb(238, 189, 223);">
<h6>Broj upisanih po satu</h6>
<table class="statistic-requirement">
<tr>
<td>datum</td>
<td>sat</td>
<td>zahtjeva</td>
</tr>
<tr>
<td>27.04.</td>
<td>06</td>
<td>1</td>
</tr>
<tr>
<td>27.04.</td>
<td>07</td>
<td>3</td>
</tr>
<tr>
<td>27.04.</td>
<td>08</td>
<td>11</td>
</tr>
<tr>
<td>27.04.</td>
<td>09</td>
<td>26</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<!--Treca kartica-->
<div class="container">
<table class="table table-borderless" style="background-color: thistle;">
<tr>
<td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
</tr>
</table>
<table class="table table-dark table-borderless">
<tr>
<td style="padding: 0rem">Zaprimljeno zahtjeva</td>
</tr>
<tr>
<td style="font-size: 5.5rem; padding: 0rem ">4979</td>
</tr>
<tr>
<td style="padding: 0rem">poslano</td>
</tr>
<tr>
<td style="padding: 0rem">17.4.2020. do 12h</td>
</tr>
</table>
<table class="table table-borderless" style="background-color: thistle
; font-weight: 700;">
<tr>
<td>Osobna provjera</td>
<td>SMS obavijest</td>
<td>Kontakt centar</td>
</tr>
<tr>
<td style="font-size: 2.5rem;">6243</td>
<td style="font-size: 2.5rem;">2322</td>
<td style="font-size: 2.5rem;">230</td>
</tr>
</table>
<div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
<h6>Po statusu zaposlenosti</h6>
<table class="statistic-employment">
<tr>
<td>EMPLOYED</td>
<td>83</td>
</tr>
<tr>
<td>PENSIONER</td>
<td>10</td>
</tr>
<tr>
<td>UNEMPLOYED</td>
<td>25</td>
</tr>
<tr>
<td>UNEMPLOYED_COVID</td>
<td>19</td>
</tr>
</table>
</div>
<div class="statistic-requirement" style="background-color: rgb(238, 189, 223);">
<h6>Broj upisanih po satu</h6>
<table class="statistic-requirement">
<tr>
<td>datum</td>
<td>sat</td>
<td>zahtjeva</td>
</tr>
<tr>
<td>28.04.</td>
<td>00</td>
<td>1</td>
</tr>
<tr>
<td>28.04.</td>
<td>05</td>
<td>2</td>
</tr>
<tr>
<td>28.04.</td>
<td>06</td>
<td>1</td>
</tr>
<tr>
<td>28.04.</td>
<td>08</td>
<td>14</td>
</tr>
</table>
</div>
</div>
</div>
<!--Row and Main-container-->
</div>
</div>
Use #media only screen and (min-width: )
For each type of screen size, define the style you want.
For example:
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
.container {
margin: 1 rem;
}
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
.container {
margin: 2 rem;
}
}
Hope this helps
This answer is using margin class of bootstrap
<div class="container my-md-3 mx-md-2 my-lg-5 mx-lg-4">
</div>
my-md-3 means when screen >= 768px, margin top and bottom is 1rem
mx-md-2 means when screen >= 768px, margin right and left is .5rem
my-lg-5 means when screen >= 992px, margin top and bottom is 3rem
my-lg-4 means when screen >= 992px, margin right and left is 1.5rem
For more detail, Please look https://getbootstrap.com/docs/4.4/utilities/spacing/
Once the table starts getting filled it keeps giving me these blank lines on the table.
I am using a w3schools template but I don't think that's whats causing the problem. I put an image below of an example of what it would look like once the table gets filled in.
I tried different things with CSS but nothing worked and I can't find any post with similar problems, please help.
<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<head>
<style>
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
</style>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
top: 40px;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</body>
</html>
Try removing top: 40px; from your css...
I also added a margin-top to the table since it got hidden behind the navigation which uses position:fixed
snippet below:
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
table {
margin-top: 70px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
/* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
</tbody>
</table>
</body>
I created a table just like below:
As you can see the border top is not taking any changes although I did add it in the following code:
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Receiver:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Deliver To:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
Style:
.table-outer-border {
border-left: black solid;
border-right: black solid;
border-top: black solid ;
border-bottom: black solid;
border-width: thin;
}
Why is it not working and also is there a way to remove the lines between the rows?
There are couple of changes you need to do in your code, I have just made that for you, Kindly validate and let me know.
#MainDiv {
height: 100px;
width: 500px;
margin: 5px;
display: flex;
flex-direction: row;
font-size: 20px;
}
td {
width: 150px;
}
#firstDiv {
border: 1px solid black;
}
#secondDiv {
margin-left: 20px;
border: 1px solid black;
}
<div id="MainDiv">
<div id="firstDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody>
<tr>
<td>Receiver:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="secondDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody class="font-style">
<tr>
<td>Deliver To:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<!-- some rows -->
</tbody>
</table>
To scroll in tbody, I added a scss class .custom-table to table, it looks like this
.custom-table {
tbody {
height: 50px;
overflow-y: auto;
width: 100%;
display: block;
}
}
However, this style does not work correctly. All content in tbody moves to the left. I have a working JSFiddle example.
What did I do wrong?
Please check bellow, I prefer to use flexbox. I also use -webkit and -ms prefixes for more cross browser compatibility
tbody , thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
tr {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
th,td {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
tbody {
height: 50px;
overflow-y: auto;
}
thead {
padding-right: 20px;
}
I set padding-right to thead because of the scrollbar on tbody.
Did you tried to like this?
Change your css like this
.custom-table> tbody {
display:block;
height:50px;
overflow:auto;
}
.custom-table> thead, tbody tr {
display:table;
width:100%;
}
.custom-table> thead {
width: 100%
}
.custom-table {
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
</tbody>
</table>
</div>
Using Udara Kasun's solution, but making the columns lines up:
.custom-table>tbody {
display: block;
height: 50px;
overflow: auto;
}
.custom-table>thead,
tr {
display: block;
width: 100%;
}
.custom-table>thead {
width: 100%
}
.custom-table {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="flex-group-1" style="overflow-y: auto">
<table class="table table-striped table-hover custom-table table-bordered table-responsive ">
<thead>
<tr>
<th width="100">col1</th>
<th width="100">col2</th>
<th width="100">col3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">text1</td>
<td width="100">text2</td>
<td width="100">text3</td>
</tr>
<tr>
<td width="100">text4</td>
<td width="100">text5</td>
<td width="100">text6</td>
</tr>
<tr>
<td width="100">text7</td>
<td width="100">text8</td>
<td width="100">text9</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 5
Table with fixed heading row & vertically scrollable tbody
CSS Only
You have to put the table within a div
HTML:
<!-- Table -->
<div class="container shadow-sm alarm-table">
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
/* Makes table scrollable */
.alarm-table{
height: 150px;
overflow: auto;
}
/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
position: sticky;
top: 0;
}
I want four equi-sized quadrants on my page - all should be the same width and height, with some space between them.
What I'm getting as of now is this:
What I want is that the top right quadrant ("Pricing Exceptions") stretch vertically, as if being pulled toward the bottom, so that its bottom border lines up horizontally with the top left ("Top 10 Items Purchased") quadrant.
I want similar for the two bottom quadrants, namely that the "Forecasted Spend" quadrant be "pulled down" or "stretched" so that it aligns horizontally wit the taller "Fill Rate" quadrant.
How can I accomplish that?
My code (this is a mockup - all the html and css are combined in one .html file) is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
label {
font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
.bottommarginbreathingroom {
margin-bottom: 4px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: georgias, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
.redfont {
color: red;
}
.bold {
font-weight: bold;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border:1px solid black;
}
.topright {
margin-top: 16px;
margin-right: 16px;
margin-bottom: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
.bottomleft {
margin-left: 16px;
padding: 16px;
border:1px solid black;
}
.bottomright {
margin-right: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>
<tr>
<td>102800</td>
<td>Broccoli Bunched 18 Size</td>
<td>8837</td>
</tr>
<tr>
<td>100050</td>
<td>Anise Fennell 12</td>
<td>6653</td>
</tr>
<tr>
<td>101600</td>
<td>Beans Blue Lake Round Hand Pick</td>
<td>5846</td>
</tr>
<tr>
<td>106000</td>
<td>Carrots Cello 48/1#</td>
<td>4266</td>
</tr>
<tr>
<td>108000</td>
<td>Celery Pascal 12</td>
<td>3774</td>
</tr>
<tr>
<td>105000</td>
<td>Cabbage Green 45-50#</td>
<td>3024</td>
</tr>
<tr>
<td>104000</td>
<td>Brussel Sprouts Cello Cups 12/12 oz</td>
<td>2663</td>
</tr>
<tr>
<td>100450</td>
<td>Asparagus Colossal 11/1#</td>
<td>2624</td>
</tr>
<tr>
<td>102350</td>
<td>Beets With Tops 24</td>
<td>2253</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>231083</td>
<td>BERRIES, BLACK DRISC 1/6 OZ</td>
<td>0.00</td>
<td>4.35</td>
<td>1.00</td>
</tr>
<tr>
<td>104150</td>
<td>BRUSSEL SPROUTS, 25#</td>
<td>0.00</td>
<td>36.20</td>
<td>1.00</td>
</tr>
<tr>
<td>261650</td>
<td>LIMES, 200 CT 40#</td>
<td>0.00</td>
<td>18.65</td>
<td>2.00</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td>0.00</td>
<td>19.95</td>
<td>2.00</td>
</tr>
<tr>
<td>398980</td>
<td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
<td>38.30</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>398280</td>
<td>MELONS, HONEYDEW CHUNKS 2/5#</td>
<td>37.30</td>
<td>34.50</td>
<td>15.00</td>
</tr>
<tr>
<td>398036</td>
<td>PINEAPPLE, CHUNKS 2/5#</td>
<td>37.70</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>351135</td>
<td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
<td>6.46</td>
<td>6.01</td>
<td>2.00</td>
</tr>
<tr>
<td>208110</td>
<td>APPLES, GALA 12 CT</td>
<td>0.00</td>
<td>8.04</td>
<td>1.00</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend</h2>
<table>
<tr>
<th>Item Code</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td>49</td>
<td>3.14</td>
<td>153.86</td>
</tr>
<tr>
<td>231083</td>
<td>52</td>
<td>1.25</td>
<td>65.00</td>
</tr>
<tr>
<td>398980</td>
<td>46</td>
<td>4.95</td>
<td>227.70</td>
</tr>
<tr>
<td>351135</td>
<td>40</td>
<td>0.75</td>
<td>30.00</td>
</tr>
<tr>
<td>398036</td>
<td>42</td>
<td>3.00</td>
<td>126.00</td>
</tr>
<tr>
<td>208110</td>
<td>42</td>
<td>2.50</td>
<td>105.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold">271</td>
<td class="bold">--</td>
<td class="bold">$707.56</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
<table>
<tr>
<th>Company Name</th>
<th>Reason Description</th>
<th>Ordered</th>
<th>Shipped</th>
<th>Rate %</th>
</tr>
<tr>
<td>ABUELOS #A11 - PEORIA</td>
<td>Regular Item, no issues</td>
<td>622</td>
<td>622</td>
<td>100</td>
</tr>
<tr>
<td>ABUELOS #A09 - EAST PLANO</td>
<td>Regular Item, no issues</td>
<td>371</td>
<td>375</td>
<td>101</td>
</tr>
<tr>
<td>ABUELOS #A26 - MYRTLE BEACH</td>
<td>Credit - Product Quality (for credit adjustments only)</td>
<td>19</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>ABUELOS #A38 - LAKELAND</td>
<td>Regular Item, no issues</td>
<td>569</td>
<td>569</td>
<td>100</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold">1581</td>
<td class="bold">1575</td>
<td class="bold">99.6</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I usually create my own javascript to check each row. I give all divs that should have the same height (in your case the col-md-6 divs) an additional class: match-height (a ripoff of the existing plugin matchHeight.js).
This code will loop through all .row divs and see which .match-height div is the highest. After this is done the code will adjust all those divs to the highest div giving it min-height CSS.
$(window).on("load resize", function equalHeights() {
$('.row').each(function(){
var highestBox = 0;
$(this).find('.match-height').css("min-height", 0);
$(this).find('.match-height').each(function() {
if ($(this).outerHeight() > highestBox) {
highestBox = $(this).outerHeight();
}
});
$(this).find('.match-height').css("min-height", highestBox);
});
});
Example:
<div class="container">
<div class="row">
<div class="col-md-6 match-height">
1st table
</div>
<div class="col-md-6 match-height">
2nd table
</div>
</div>
<div class="row">
<div class="col-md-6 match-height">
3rd table
</div>
<div class="col-md-6 match-height">
4th table
</div>
</div>
</div>
Let me know if this is what you are looking for,
If you aren't creating dynamic sized containers then you can set the height like so:
.topright, .topleft {
height: 400px;
}
This will keep them even.
Took me lot of time and I got this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
label {
font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
.bottommarginbreathingroom {
margin-bottom: 4px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: georgias, sans-serif;
border-collapse: collapse;
width: 100%;
align:center;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
.redfont {
color: red;
}
.bold {
font-weight: bold;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
margin-right:19px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:500px;
}
.topright {
margin-top: 16px;
margin-right: 16px;
margin-left: 15px;
padding-top: 16px;
padding-bottom:16px;
height:500px;
border:1px solid black;
}
.bottomleft {
margin-left: 16px;
margin-top:30px;
margin-right:18px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:385px;
}
.bottomright {
margin-right: 16px;
margin-top:30px;
margin-left:15px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:385px;
}
#xyz{
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6 col-sm-12 ">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>
<tr>
<td>102800</td>
<td>Broccoli Bunched 18 Size</td>
<td>8837</td>
</tr>
<tr>
<td>100050</td>
<td>Anise Fennell 12</td>
<td>6653</td>
</tr>
<tr>
<td>101600</td>
<td>Beans Blue Lake Round Hand Pick</td>
<td>5846</td>
</tr>
<tr>
<td>106000</td>
<td>Carrots Cello 48/1#</td>
<td>4266</td>
</tr>
<tr>
<td>108000</td>
<td>Celery Pascal 12</td>
<td>3774</td>
</tr>
<tr>
<td>105000</td>
<td>Cabbage Green 45-50#</td>
<td>3024</td>
</tr>
<tr>
<td>104000</td>
<td>Brussel Sprouts Cello Cups 12/12 oz</td>
<td>2663</td>
</tr>
<tr>
<td>100450</td>
<td>Asparagus Colossal 11/1#</td>
<td>2624</td>
</tr>
<tr>
<td>102350</td>
<td>Beets With Tops 24</td>
<td>2253</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>231083</td>
<td>BERRIES, BLACK DRISC 1/6 OZ</td>
<td>0.00</td>
<td>4.35</td>
<td>1.00</td>
</tr>
<tr>
<td>104150</td>
<td>BRUSSEL SPROUTS, 25#</td>
<td>0.00</td>
<td>36.20</td>
<td>1.00</td>
</tr>
<tr>
<td>261650</td>
<td>LIMES, 200 CT 40#</td>
<td>0.00</td>
<td>18.65</td>
<td>2.00</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td>0.00</td>
<td>19.95</td>
<td>2.00</td>
</tr>
<tr>
<td>398980</td>
<td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
<td>38.30</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>398280</td>
<td>MELONS, HONEYDEW CHUNKS 2/5#</td>
<td>37.30</td>
<td>34.50</td>
<td>15.00</td>
</tr>
<tr>
<td>398036</td>
<td>PINEAPPLE, CHUNKS 2/5#</td>
<td>37.70</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>351135</td>
<td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
<td>6.46</td>
<td>6.01</td>
<td>2.00</td>
</tr>
<tr>
<td>208110</td>
<td>APPLES, GALA 12 CT</td>
<td>0.00</td>
<td>8.04</td>
<td>1.00</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 col-sm-12"><br/></div>
<div class="col-md-6 col-sm-12"><br/></div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12" >
<div class="bottomleft" >
<h2 class="sectiontext">Forecasted Spend</h2>
<table>
<tr>
<th>Item Code</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td>49</td>
<td>3.14</td>
<td>153.86</td>
</tr>
<tr>
<td>231083</td>
<td>52</td>
<td>1.25</td>
<td>65.00</td>
</tr>
<tr>
<td>398980</td>
<td>46</td>
<td>4.95</td>
<td>227.70</td>
</tr>
<tr>
<td>351135</td>
<td>40</td>
<td>0.75</td>
<td>30.00</td>
</tr>
<tr>
<td>398036</td>
<td>42</td>
<td>3.00</td>
<td>126.00</td>
</tr>
<tr>
<td>208110</td>
<td>42</td>
<td>2.50</td>
<td>105.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold">271</td>
<td class="bold">--</td>
<td class="bold">$707.56</td>
</tr>
</table >
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
<table>
<tr>
<th>Company Name</th>
<th>Reason Description</th>
<th>Ordered</th>
<th>Shipped</th>
<th>Rate %</th>
</tr>
<tr>
<td>ABUELOS #A11 - PEORIA</td>
<td>Regular Item, no issues</td>
<td>622</td>
<td>622</td>
<td>100</td>
</tr>
<tr>
<td>ABUELOS #A09 - EAST PLANO</td>
<td>Regular Item, no issues</td>
<td>371</td>
<td>375</td>
<td>101</td>
</tr>
<tr>
<td>ABUELOS #A26 - MYRTLE BEACH</td>
<td>Credit - Product Quality (for credit adjustments only)</td>
<td>19</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>ABUELOS #A38 - LAKELAND</td>
<td>Regular Item, no issues</td>
<td>569</td>
<td>569</td>
<td>100</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold">1581</td>
<td class="bold">1575</td>
<td class="bold">99.6</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6"><br/></div>
<div class="col-lg-6"><br/></div>
</div>
</div>
</body>
</html>
Because the height of each container is automatically increased as the content increases. As the four tables have different content, you can set a fixed height to solve the problem.