How to create responsive table with relative size and scroll - html

I have the index list working as intended but I still have problems with the table and footer.
Known problems:
table header doesn't stay fixed when I scroll
table height is not responsive and overflows into the footer
table x scroll bar is at the bottom of the page and is not at the bottom of the table view. Intended functionality is the same as the code snippets on this site.
footer margin is not enforced on mobile.
footer height causing large white space at the bottom of the div. Most likely due to height property resizing the div.
Below is the intended design.
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
margin-bottom: 80px;
/* overflow: hidden; */
}
footer {
margin-top: 80px;
height: 10vh;
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh;
width: 100vw;
overflow: auto;
/* overflow-x: scroll; */
/* overflow-y: scroll; */
position: relative;
/* padding-bottom: 80px; */
/* flex: 1; */
/* margin-bottom: 16px; */
}
<!doctype html>
<html style="font-family: Arial" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<link rel="stylesheet" href="/static/style.css">
<title></title>
</head>
<body class="bg-dark text-white container-fluid">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://kit.fontawesome.com/f149088b14.js" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/hammerjs#2.0.8"></script> -->
<!-- <script src="path/to/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script> -->
<header class="navbar navbar-expand-sm navbar-dark sticky-top bg-dark">
<a class="navbar-brand" href="/">Paper Money</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<div class="navbar-nav ml-auto">
<a class="nav-link text-nowrap" href="/auth/register">Register</a>
<a class="nav-link text-nowrap" href="/auth/login">Log In</a>
</div>
</div>
<form id= "searchInput"class="form-inline w-100" action="/company_overview" method="get">
<input class="form-control form-control-dark w-100" name="q" type="search" placeholder="Search by ticker symbol..." aria-label="Search">
</form>
</header>
<main role="main" class="container-fluid">
<div class="indices-container">
<div class="row text-center mx-1">
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VOO<br>
<span class="d-none d-lg-block">$431.05</span>
<span class="d-none d-lg-block">-0.19% 1-Day</span>
26.69% YTD
</div>
<div class="col-12 col-md-6 px-0">
BND<br>
<span class="d-none d-lg-block">$85.23</span>
<span class="d-none d-lg-block">0.21% 1-Day</span>
-1.93% YTD
</div>
</div>
</div>
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VXUS<br>
<span class="d-none d-lg-block">$65.61</span>
<span class="d-none d-lg-block">-0.23% 1-Day</span>
10.80% YTD
</div>
<div class="col-12 col-md-6 px-0">
VEA<br>
<span class="d-none d-lg-block">$51.99</span>
<span class="d-none d-lg-block">-0.76% 1-Day</span>
11.96% YTD
</div>
</div>
</div>
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VWO<br>
<span class="d-none d-lg-block">$51.06</span>
<span class="d-none d-lg-block">-0.18% 1-Day</span>
3.54% YTD
</div>
<div class="col-12 col-md-6 px-0">
BNDX<br>
<span class="d-none d-lg-block">$56.95</span>
<span class="d-none d-lg-block">0.16% 1-Day</span>
-2.10% YTD
</div>
</div>
</div>
</div>
</div>
<div class="sp500-table-container">
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm header-fixed" id="sp500Table">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Symbol</th>
<th>Security</th>
<th>SEC Filings</th>
<th>Sector</th>
<th>Sub Sector</th>
<th>Headquarters</th>
<th>Date First Added</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>MMM</td>
<td>3M</td>
<td>link</td>
<td>Industrials</td>
<td>Industrial Conglomerates</td>
<td>Saint Paul, Minnesota</td>
<td>1976-08-09</td>
</tr>
<tr>
<td>2</td>
<td>ABT</td>
<td>Abbott Laboratories</td>
<td>link</td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>North Chicago, Illinois</td>
<td>1964-03-31</td>
</tr>
<tr>
<td>3</td>
<td>ABBV</td>
<td>AbbVie</td>
<td>link</td>
<td>Health Care</td>
<td>Pharmaceuticals</td>
<td>North Chicago, Illinois</td>
<td>2012-12-31</td>
</tr>
<tr>
<td>4</td>
<td>ABMD</td>
<td>Abiomed</td>
<td>link</td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>Danvers, Massachusetts</td>
<td>2018-05-31</td>
</tr>
<tr>
<td>5</td>
<td>ACN</td>
<td>Accenture</td>
<td>link</td>
<td>Information Technology</td>
<td>IT Consulting & Other Services</td>
<td>Dublin, Ireland</td>
<td>2011-07-06</td>
</tr>
<tr>
<td>6</td>
<td>ATVI</td>
<td>Activision Blizzard</td>
<td>link</td>
<td>Communication Services</td>
<td>Interactive Home Entertainment</td>
<td>Santa Monica, California</td>
<td>2015-08-31</td>
</tr>
<tr>
<td>7</td>
<td>ADBE</td>
<td>Adobe</td>
<td>link</td>
<td>Information Technology</td>
<td>Application Software</td>
<td>San Jose, California</td>
<td>1997-05-05</td>
</tr>
<tr>
<td>8</td>
<td>AMD</td>
<td>Advanced Micro Devices</td>
<td>link</td>
<td>Information Technology</td>
<td>Semiconductors</td>
<td>Santa Clara, California</td>
<td>None</td>
</tr>
<tr>
<td>9</td>
<td>AAP</td>
<td>Advance Auto Parts</td>
<td>link</td>
<td>Consumer Discretionary</td>
<td>Automotive Retail</td>
<td>Raleigh, North Carolina</td>
<td>2015-07-09</td>
</tr>
<tr>
<td>10</td>
<td>AES</td>
<td>AES Corp</td>
<td>link</td>
<td>Utilities</td>
<td>Independent Power Producers & Energy Traders</td>
<td>Arlington, Virginia</td>
<td>1998-10-02</td>
</tr>
<tr>
<td>11</td>
<td>AFL</td>
<td>Aflac</td>
<td>link</td>
<td>Financials</td>
<td>Life & Health Insurance</td>
<td>Columbus, Georgia</td>
<td>1999-05-28</td>
</tr>
<tr>
<td>12</td>
<td>A</td>
<td>Agilent Technologies</td>
<td>link</td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>Santa Clara, California</td>
<td>2000-06-05</td>
</tr>
<tr>
<td>13</td>
<td>APD</td>
<td>Air Products & Chemicals</td>
<td>link</td>
<td>Materials</td>
<td>Industrial Gases</td>
<td>Allentown, Pennsylvania</td>
<td>1985-04-30</td>
</tr>
<tr>
<td>14</td>
<td>AKAM</td>
<td>Akamai Technologies</td>
<td>link</td>
<td>Information Technology</td>
<td>Internet Services & Infrastructure</td>
<td>Cambridge, Massachusetts</td>
<td>2007-07-12</td>
</tr>
<tr>
<td>15</td>
<td>ALK</td>
<td>Alaska Air Group</td>
<td>link</td>
<td>Industrials</td>
<td>Airlines</td>
<td>Seattle, Washington</td>
<td>2016-05-13</td>
</tr>
<tr>
<td>16</td>
<td>ALB</td>
<td>Albemarle Corporation</td>
<td>link</td>
<td>Materials</td>
<td>Specialty Chemicals</td>
<td>Charlotte, North Carolina</td>
<td>2016-07-01</td>
</tr>
<tr>
<td>17</td>
<td>ARE</td>
<td>Alexandria Real Estate Equities</td>
<td>link</td>
<td>Real Estate</td>
<td>Office REITs</td>
<td>Pasadena, California</td>
<td>2017-03-20</td>
</tr>
<tr>
<td>18</td>
<td>ALGN</td>
<td>Align Technology</td>
<td>link</td>
<td>Health Care</td>
<td>Health Care Supplies</td>
<td>San Jose, California</td>
<td>2017-06-19</td>
</tr>
<tr>
<td>19</td>
<td>ALLE</td>
<td>Allegion</td>
<td>link</td>
<td>Industrials</td>
<td>Building Products</td>
<td>New York City, New York</td>
<td>2013-12-02</td>
</tr>
<tr>
<td>20</td>
<td>LNT</td>
<td>Alliant Energy</td>
<td>link</td>
<td>Utilities</td>
<td>Electric Utilities</td>
<td>Madison, Wisconsin</td>
<td>2016-07-01</td>
</tr>
<tr>
<td>21</td>
<td>ALL</td>
<td>Allstate Corp</td>
<td>link</td>
<td>Financials</td>
<td>Property & Casualty Insurance</td>
<td>Northfield Township, Illinois</td>
<td>1995-07-13</td>
</tr>
<tr>
<td>22</td>
<td>GOOGL</td>
<td>Alphabet</td>
<td>link</td>
<td>Communication Services</td>
<td>Interactive Media & Services</td>
<td>Mountain View, California</td>
<td>2014-04-03</td>
</tr>
<tr>
<td>23</td>
<td>GOOG</td>
<td>Alphabet</td>
<td>link</td>
<td>Communication Services</td>
<td>Interactive Media & Services</td>
<td>Mountain View, California</td>
<td>2006-04-03</td>
</tr>
<tr>
<td>24</td>
<td>MO</td>
<td>Altria Group</td>
<td>link</td>
<td>Consumer Staples</td>
<td>Tobacco</td>
<td>Richmond, Virginia</td>
<td>1957-03-04</td>
</tr>
<tr>
<td>25</td>
<td>AMZN</td>
<td>Amazon</td>
<td>link</td>
<td>Consumer Discretionary</td>
<td>Internet & Direct Marketing Retail</td>
<td>Seattle, Washington</td>
<td>2005-11-18</td>
</tr>
<tr>
<td>26</td>
<td>AMCR</td>
<td>Amcor</td>
<td>link</td>
<td>Materials</td>
<td>Paper Packaging</td>
<td>Zurich, Switzerland</td>
<td>2019-06-07</td>
</tr>
<tr>
<td>27</td>
<td>AEE</td>
<td>Ameren Corp</td>
<td>link</td>
<td>Utilities</td>
<td>Multi-Utilities</td>
<td>St. Louis, Missouri</td>
<td>1991-09-19</td>
</tr>
<tr>
<td>28</td>
<td>AAL</td>
<td>American Airlines Group</td>
<td>link</td>
<td>Industrials</td>
<td>Airlines</td>
<td>Fort Worth, Texas</td>
<td>2015-03-23</td>
</tr>
<tr>
<td>29</td>
<td>AEP</td>
<td>American Electric Power</td>
<td>link</td>
<td>Utilities</td>
<td>Electric Utilities</td>
<td>Columbus, Ohio</td>
<td>1957-03-04</td>
</tr>
<tr>
<td>30</td>
<td>AXP</td>
<td>American Express</td>
<td>link</td>
<td>Financials</td>
<td>Consumer Finance</td>
<td>New York City, New York</td>
<td>1976-06-30</td>
</tr>
<tr>
<td>31</td>
<td>AIG</td>
<td>American International Group</td>
<td>link</td>
<td>Financials</td>
<td>Property & Casualty Insurance</td>
<td>New York City, New York</td>
<td>1980-03-31</td>
</tr>
<tr>
<td>32</td>
<td>AMT</td>
<td>American Tower</td>
<td>link</td>
<td>Real Estate</td>
<td>Specialized REITs</td>
<td>Boston, Massachusetts</td>
<td>2007-11-19</td>
</tr>
<tr>
<td>33</td>
<td>AWK</td>
<td>American Water Works</td>
<td>link</td>
<td>Utilities</td>
<td>Water Utilities</td>
<td>Camden, New Jersey</td>
<td>2016-03-04</td>
</tr>
<tr>
<td>34</td>
<td>AMP</td>
<td>Ameriprise Financial</td>
<td>link</td>
<td>Financials</td>
<td>Asset Management & Custody Banks</td>
<td>Minneapolis, Minnesota</td>
<td>2005-10-03</td>
</tr>
<tr>
<td>35</td>
<td>ABC</td>
<td>AmerisourceBergen</td>
<td>link</td>
<td>Health Care</td>
<td>Health Care Distributors</td>
<td>Chesterbrook, Pennsylvania</td>
<td>2001-08-30</td>
</tr>
<tr>
<td>36</td>
<td>AME</td>
<td>Ametek</td>
<td>link</td>
<td>Industrials</td>
<td>Electrical Components & Equipment</td>
<td>Berwyn, Pennsylvania</td>
<td>2013-09-23</td>
</tr>
<tr>
<td>37</td>
<td>AMGN</td>
<td>Amgen</td>
<td>link</td>
<td>Health Care</td>
<td>Biotechnology</td>
<td>Thousand Oaks, California</td>
<td>1992-01-02</td>
</tr>
<tr>
<td>38</td>
<td>APH</td>
<td>Amphenol</td>
<td>link</td>
<td>Information Technology</td>
<td>Electronic Components</td>
<td>Wallingford, Connecticut</td>
<td>2008-09-30</td>
</tr>
<tr>
<td>39</td>
<td>ADI</td>
<td>Analog Devices</td>
<td>link</td>
<td>Information Technology</td>
<td>Semiconductors</td>
<td>Wilmington, Massachusetts</td>
<td>1999-10-12</td>
</tr>
<tr>
<td>40</td>
<td>ANSS</td>
<td>Ansys</td>
<td>link</td>
<td>Information Technology</td>
<td>Application Software</td>
<td>Canonsburg, Pennsylvania</td>
<td>2017-06-19</td>
</tr>
<tr>
<td>41</td>
<td>ANTM</td>
<td>Anthem</td>
<td>link</td>
<td>Health Care</td>
<td>Managed Health Care</td>
<td>Indianapolis, Indiana</td>
<td>2002-07-25</td>
</tr>
<tr>
<td>42</td>
<td>AON</td>
<td>Aon</td>
<td>link</td>
<td>Financials</td>
<td>Insurance Brokers</td>
<td>London, UK</td>
<td>1996-04-23</td>
</tr>
<tr>
<td>43</td>
<td>AOS</td>
<td>A. O. Smith</td>
<td>link</td>
<td>Industrials</td>
<td>Building Products</td>
<td>Milwaukee, Wisconsin</td>
<td>2017-07-26</td>
</tr>
<tr>
<td>44</td>
<td>APA</td>
<td>APA Corporation</td>
<td>link</td>
<td>Energy</td>
<td>Oil & Gas Exploration & Production</td>
<td>Houston, Texas</td>
<td>1997-07-28</td>
</tr>
<tr>
<td>45</td>
<td>AAPL</td>
<td>Apple</td>
<td>link</td>
<td>Information Technology</td>
<td>Technology Hardware, Storage & Peripherals</td>
<td>Cupertino, California</td>
<td>1982-11-30</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer class="page-footer font-small fixed-bottom">
<div class="container-fluid text-center">
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
GitLab
</li>
<li class="list-inline-item">
About the Author
</li>
<li class="list-inline-item">
About the App
</li>
<li class="list-inline-item">
Code License
</li>
<li class="list-inline-item">
Contact Me
</li>
</ul>
</div>
</footer>
</body>
</html>


Have managed to solve all bugs by changing the CSS file except for the table header being sticky.
Here's the code for it
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
margin-bottom: 80px;
/* overflow: hidden; */
}
footer {
margin-top: 80px;
height: 10vh;
width:100%;
padding:0.4rem 0;
background:#343A40;
}
#media all and (max-width:700px){
footer{
font-size:1rem;
margin:0 1rem;
}
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh !important;
width: 100vw;
position: relative;
/* padding-bottom: 80px; */
/* flex: 1; */
/* margin-bottom: 16px; */
}
main{
overflow-x:scroll;
}

Related

Bootstrap 4 - Fixed/Sticky Headers for Table on a Tab

I have a simple Bootstrap 4 page with multiple tabs on the page. Each tab has a different table, some of which have a large number of rows. I would now like to make the table header on each tab fixed/sticky so that it doesn't scroll as the user scrolls the page down.
Here's an example of my page with a table on the first tab:
th {
background: white;
position: sticky;
top: 0;
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#"><img src="" width="165" height="36" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Management</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="jobs.php?action=showall">Jobs List</a>
<a class="dropdown-item" href="jobsSearch.php">Search Jobs</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-bordered">
<tr>
<td width=35%>Ref Number:</td>
<td width=80%>123456</td>
</tr>
<tr>
<td>Name:</td>
<td>Acme Corp Pty Ltd</td>
</tr>
<tr>
<td>Job Number:</td>
<td>5521236987452</td>
</tr>
<tr>
<td>Address:</td>
<td>21 Jump St, Beverley Hills 90210</td>
</tr>
<tr>
<td>Client:</td>
<td>Sony Pty Ltd</td>
</tr>
<tr>
<td>State:</td>
<td>CA </td>
</tr>
<tr>
<td>Inspection Date:</td>
<td></td>
</tr>
</table>
</div>
</div>
<ul class="nav nav-tabs" id="projectTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="Contacts-tab" data-toggle="tab" href="#Contacts" role="tab" aria-controls="Contacts" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Contractors-tab" data-toggle="tab" href="#Contractors" role="tab" aria-controls="Contractors" aria-selected="false">Contractors</a>
</li>
</ul>
<div class="tab-content" id="Tabs">
<div class="tab-pane fade show active" id="Contacts" role="tabpanel" aria-labelledby="Contacts">
<table class="table table-striped table-hover table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Code</th>
</thead>
<tbody>
<tr id="211140">
<td> Jaxon Copeley</td>
<td>Senior Designer</td>
<td>8</td>
</tr>
<tr id="212265">
<td> Sean Dacey</td>
<td>Associate</td>
<td>1687</td>
</tr>
<tr id="212364">
<td> Nathan Giffen</td>
<td>Senior Designer</td>
<td>273.8</td>
</tr>
<tr id="212312">
<td> Tristan Godson</td>
<td>Project Designer </td>
<td>85.75</td>
</tr>
<tr id="207542">
<td> Anthony McAulay</td>
<td>Designer</td>
<td>566.2</td>
</tr>
<tr id="207990">
<td> Gabriella Schofield</td>
<td>Senior Designer</td>
<td>107</td>
</tr>
<tr id="213479">
<td> Hayden Giblin</td>
<td>Creative Designer</td>
<td>60</td>
</tr>
<tr id="208423">
<td> Archer Doolan</td>
<td>Associate</td>
<td>487.9</td>
</tr>
<tr id="208468">
<td> Taylah Hutcheon</td>
<td>Senior Associate</td>
<td>5</td>
</tr>
<tr id="212645">
<td> Hayley Hodgson</td>
<td>Director</td>
<td>37</td>
</tr>
<tr id="214303">
<td> Henry Powell</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
Is it possible to have the headers on the tabs fixed so they are visible as you scroll down the page?

You can use the position:sticky property on th elements for this.
If you have an additional fixed element on your page (like a fixed navbar), set the top property to the height of this element, so it sticks to the bottom of it:
th {
background: white;
position: sticky;
top: 60px; /* this is the distance from the top of the viewport your element will 'stick' to. */
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-bordered">
<tr>
<td width=35%>Ref Number:</td>
<td width=80%>123456</td>
</tr>
<tr>
<td>Name:</td>
<td>Acme Corp Pty Ltd</td>
</tr>
<tr>
<td>Job Number:</td>
<td>5521236987452</td>
</tr>
<tr>
<td>Address:</td>
<td>21 Jump St, Beverley Hills 90210</td>
</tr>
<tr>
<td>Client:</td>
<td>Sony Pty Ltd</td>
</tr>
<tr>
<td>State:</td>
<td>CA </td>
</tr>
<tr>
<td>Inspection Date:</td>
<td></td>
</tr>
</table>
</div>
</div>
<ul class="nav nav-tabs" id="projectTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="Contacts-tab" data-toggle="tab" href="#Contacts" role="tab" aria-controls="Contacts" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Contractors-tab" data-toggle="tab" href="#Contractors" role="tab" aria-controls="Contractors" aria-selected="false">Contractors</a>
</li>
</ul>
<div class="tab-content" id="Tabs">
<div class="tab-pane fade show active" id="Contacts" role="tabpanel" aria-labelledby="Contacts">
<table class="table table-striped table-hover table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Code</th>
</thead>
<tbody>
<tr id="211140">
<td> Jaxon Copeley</td>
<td>Senior Designer</td>
<td>8</td>
</tr>
<tr id="212265">
<td> Sean Dacey</td>
<td>Associate</td>
<td>1687</td>
</tr>
<tr id="212364">
<td> Nathan Giffen</td>
<td>Senior Designer</td>
<td>273.8</td>
</tr>
<tr id="212312">
<td> Tristan Godson</td>
<td>Project Designer </td>
<td>85.75</td>
</tr>
<tr id="207542">
<td> Anthony McAulay</td>
<td>Designer</td>
<td>566.2</td>
</tr>
<tr id="207990">
<td> Gabriella Schofield</td>
<td>Senior Designer</td>
<td>107</td>
</tr>
<tr id="213479">
<td> Hayden Giblin</td>
<td>Creative Designer</td>
<td>60</td>
</tr>
<tr id="208423">
<td> Archer Doolan</td>
<td>Associate</td>
<td>487.9</td>
</tr>
<tr id="208468">
<td> Taylah Hutcheon</td>
<td>Senior Associate</td>
<td>5</td>
</tr>
<tr id="212645">
<td> Hayley Hodgson</td>
<td>Director</td>
<td>37</td>
</tr>
<tr id="214303">
<td> Henry Powell</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>

How to set different margins for specific breakpoints in Bootstrap 4 (no javascript)

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/

The scroll bar and stretched to the height of the screen

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.

html table side by side: <table style="float: left;"> does not work

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>

horizontal scrollbar not working for the headers

I have multiple coloumns in the table, the header of the table is fixed. Some of the columns in the header (last coloumns) are not listed inside the panel. Please see the attached demo here
When the number of coloumns are more horizontal scrollbar is appearing, but issue is headers are not scrolling and listed outside the panel. Please find the demo here.
html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table class="table" border="1">
<thead>
<tr>
<td>Namffffffffffffffffffffffffe</td>
<td>phone</td>
<td>Address</td>
<td>Street</td>
<td>City</td>
<td>Pin</td>
<td>Comments</td>
<td>info</td>
<td>Amount</td>
<td>percentage</td>
<td>total</td>
</tr>
</thead>
<tbody>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr> </tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
css code:
.modal-body {
overflow-y: auto;
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

Edited your css code. Hope this helps
.modal-body {
overflow-y: auto;
}
tbody {
}
thead, tbody tr {
}
thead {
width: calc( 100% - 1em )
}
table {border-collapse:collapse; height:300px;overflow: auto;
display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}