I have the following horizontal scrollbar, how to make it visible, without background, and add a padding-bottom so it's not touching the border?
I need it to be the same as in the photo above, with some space between the border and the actual scrollbar.
.container {
padding: 20px;
border-radius: 20px;
border: 1px solid #e1e1e1;
margin: 0px 60px 0px 60px;
overflow-x: auto;
position: relative;
}
::-webkit-scrollbar {
height: 5px;
width: 5px;
}
.container ::-webkit-scrollbar-track-piece {
background: white;
}
.container ::-webkit-scrollbar-thumb {
background: #f0f0f0;
border-radius: 8px;
}
.container ::-webkit-scrollbar-track-piece:end {
margin-right: 20px;
}
.container ::-webkit-scrollbar-track-piece:start {
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="container">
<table>
<thead
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</thead>
</table>
</div>
</body>
</html>
You need to add some style to table and container
.container {
padding: 3px 20px;
border-radius: 20px;
border: 1px solid #e1e1e1;
margin: 0px;
position: relative;
overflow: hidden;
}
.container table {
overflow-x: auto;
display: block;
padding: 20px;
}
Related
I have a vertical menu div and a paragraph div each in a separate line but I want them glued beside each other.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I just want the innertext (class="container-men") to be animatedly changed by clicking on each (class="vertical-men")
and also I'd be really grateful if you could give me the Javascript codes for that purpose. thanks a lot!!
There are multiple ways to achieve what you try. CSS-Grid, Flexbox, Float... However the modern techniques are to use either flexbox or css-grid.
Using a CSS-Grid:
You use the container main and change it into a grid layout by applying display: grid;. Then you add a 2 column layout with grid-template-columns: min-content auto;. That way The navbar will consume as much space as declared and the content all remaining space.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
width: auto;
}
main {
margin-top: 25px;
padding: 0 10px;
display: grid;
grid-template-columns: min-content auto;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Using Flexbox:
In this case you use display: flex; on the container (<main>). Then you can use flex-direction: row; to align the 2 elements next to each other. To span the content the remaining width, you can use flex-grow: 1; on the content element.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
flex-grow: 1;
}
main {
margin-top: 25px;
padding: 0 10px;
display: flex;
flex-direction: row;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I want to keep different column with different width. I have tried to change it with multiple ways including changing width for specific td/th. But width attribute is not working in my code. Table div containsoverflow property as well. But I am unable to locate why I can't change the width using inline styling or using nth-child property. Please help me solving this issue.
<!DOCTYPE html>
<html>
<head>
<style>
.table-div
{
overflow-x:auto;
overflow-y:auto;
margin-bottom: 100px;
margin-top: 100px;
max-height: 300px;"
border: 2px blue;
}
.lesswidth
{
width: 500px;
}
.fixedwidth
{
width: 150px;
}
table {
/*table-layout: fixed;*/
/* width: 100%;*/
/* max-height: 100px;*/
/*border-collapse: collapse;*/
border-spacing: 0;
border: 1px solid red;
display: block;
/*margin-bottom: 100px;*/
}
th{
/*display: block;*/
border: 1px solid red;
position: sticky;
top:0;
text-align: left;
padding: 10px;
color:black;
width: 200px;
background-color: #f2f2f2;
}
td{
/*display: block;*/
border: 1px solid red;
/*text-align: left;*/
padding: 10px;
color:black;
background-color: #f2f2f2;
width: 200px;
/*margin: 100px 0px 75px 100px;*/
/*margin-right: 100px;*/
}
/*td:nth-child(2) { width: 100px !important; }
tr:nth-child(even){
background-color: red !important;*/
}
/*tr:nth-child(even){background-color: #f2f2f2}*/
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">
</head>
<body>
<div class="container">
<div class="table-div">
<table> <!-- class="tablecolor" -->
<tr>
<th class="fixedwidth">NUMBER</th>
<th>TYPE OF VACCINE</th>
<th>RELATED USECASE</th>
<th>DEVELOPER/RESEARCHER</th>
<th>CURRENT STAGE</th>
<th>FUNDING SOURCES</th>
<th>CLINICAL TRIALS</th>
<th>ANTICIPATED NEXT STEPS</th>
<th>PUBLISHED RESULTS</th>
<th>SOURCES</th>
</tr>
<tr >
<td width="500">1</td>
<td >DNA plasmid; INO-4800</td>
<td >Same platform as vaccine candidates for Lassa, Nipah, HIV, Filovirus, HPV, cancer indications, Zika, and Hepatitis B</td>
<td >Inovio Pharmaceuticals/Beijing Advaccine Biotechnology</td>
<td >Pre-clinical</td>
<td >Coalition for Epidemic Preparedness and Gates Foundation</td>
<td >N/A</td>
<td >Started Phase 1 April 2020; initial data expected late summer 2020</td>
<td >N/A</td>
<td >World Health Organization, MarketWatch, BioAegis Therapeutics, INOVIO</td>
<tr>
</table>
</div>
</div><!-- container -->
</body>
</html>
The right way to do this is:
<td style="min-width: 500px;">1</td>
I have created a div which is normal as a rectangular shape but I need a code to work such that lower edge of div is slanted and likewise other div's below it(which could have slanted edges again).Any help would be appreciated.
This is my code snippet until now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment</title>
<!-- Bootstrap Styling css-->
<style type="text/css">
.container{
width: 100%;
padding-top: 25px;
background-color: black;
height: 300px;
}
#logo{
background-color: #FFFFFF;
float: left;
border-radius: 20px;
}
#eduhead{
/*padding-left: 40px;*/
margin-left: 10px;
color: #3C89AA;
font-weight: bold;
}
#newref{
color: white;
font-size: medium;
text-align: right;
font-weight: lighter;
}
table{
width: 100%;
}
#signup{
color:#FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #3C89AA;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th></th>
<th id="eduhead"><img src="assets/Group 31.png" id ="logo"
alt="img"> ASSIGNMENT</th>
<th>Blog</th>
<th>Packages</th>
<th>Login</th>
<th>Sign Up</th>
</tr>
</table>
</div>
<!--Including all the JavaScript Files of bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<!--Bootstrap Scrit CDN-->
The above is my code including all the CDN for Bootstrap. Any suggestions?
Here you can see different approaches to your problem. Below I placed an example, you can adjust precise values. I hope that helps.
.slanted {
position: relative;
background: red;
padding: 30px;
box-sizing: border-box;
clip-path: polygon(0 0,100% 0vw,100% 75%,0 100%)
}
<div class="slanted">
Content.
</div>
When i resize the browser window content in div comes out of the div. It should stay in its position when i zoom out and zoom in browser window irrespective of width and height of and browser window and content div must adjust automatically with dynamic height and width of browser:
.item: {
display: table;
word-break: break-all;
white-space: nowrap;
border: 1px;
border-style: solid;
border-color: silver;
border-radius: 4px;
);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.awesome {
border-right: 1px solid rgba(0, 0, 0, .12);
margin: auto;
padding: 16px;
-webkit-text-size-adjust: none;
font-size: 20px;
color: white;
display: table-cell;
font-size: 1em;
}
.fa-bars: {
position: absolute;
top: 15px;
right: 16px;
font-size: 5em;
color: coral;
display: table-cell
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
</head>
<body>
<div >
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div class="awesome">hello world
<i class="fa fa-bars"></i></div>
</li>
</ul>
</div>
</body>
</html>
.item {
display: table;
width: auto;
height: auto;
word-break: break-all;
white-space: nowrap;
border: 1px;
border-style: solid;
border-color: silver;
border-radius: 4px;
}
#-ms-viewport{
width: device-width;
}
.awesome {
padding: 10px 0;
box-shadow: none;
border-radius: 0;
background: none;
text-align: center;
color: #30a5ff;
top: 105px;
text-align: center font-size: 1em;
}
/*
.fa-check-square:before {
top: 15px;
right: 16px;
font-size: 5em;
color: coral;
display: table-cell
} */
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<div gridster="gridsterOpts" align="center">
<ul>
<li gridster-item="item" ng-repeat="item in Items" class="item" align="center">
<h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2>
</li>
</ul>
</div>
HTML Code: (together)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<style>
.item {
display: table;
width: auto;
height: auto;
word-break: break-all;
white-space: nowrap;
border: 1px;
border-style: solid;
border-color: silver;
border-radius: 4px;
}
#-ms-viewport {
width: device-width;
}
.awesome {
padding: 10px 0;
box-shadow: none;
border-radius: 0;
background: none;
text-align: center;
color: #30a5ff;
top: 105px;
text-align: center font-size: 1em;
}
/*
.fa-check-square:before {
top: 15px;
right: 16px;
font-size: 5em;
color: coral;
display: table-cell
} */
</style>
</head>
<body>
<div gridster="gridsterOpts" align="center">
<ul>
<li gridster-item="item" ng-repeat="item in Items" class="item" align="center">
<h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2>
</li>
</ul>
</div>
</body>
</html>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
Below is the code I made for a simple html table. My goal is to center the entire table vertically in the center of the page based on the users height of the device. I tried to make a div with the height as 100% and width as 100% and placing the table 50% from top and left and no luck. Any ideas?
body {
background-color: #a00000;
}
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</body>
</html>
You can use flexbox to achieve the result you're looking for.
Set both the body & html to height: 100%;
Wrap the table with a wrapper div and use:
.wrapper {
display: flex;
height: 100%;
}
set the table margins to margin: auto;
This will ensure your table is always perfectly centered.
body, html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0; /* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
table {
margin: auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Try adding the following CSS rules to the table element:
table{
/* ... */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
display: table-cell; Add this on the parent div and then use vrtical-align on the table itself.
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
I believe you can do something like this to get yourself vertically centered on any given browser.
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
position: relative;
top: 50%;
transform: translateY(50%);
}
https://jsfiddle.net/rodhartzell/s6x5toj9/