i have big challenge in html css in create custom table
I have no idea in this case for create
I want create circular on vertical line of border
I create this table . but these to are very Different :-D
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 5px);
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>
<div class="container">
<div class="circle">test</div>
</div>
</td>
<td>94</td>
</tr>
</table>
You are on right track just a little bit of changes in left and some padding on td
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 16px;
}
td{
padding-right: 22px;
}
.container {
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
left: -38px;
top: 50%;
text-align: center;
line-height: 37px;
transform: translate(0%, -50%);
}
<html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
</table>
</html>
this code
try that :
<html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td style="width: 100px;height: 100px;"> <div class="row">
<div class="large-8 large-centered">
<div class="wrapper">
<div class="vertical-line"></div>
<div class="circle">
<h5>Some Text</h5>
</div>
<div class="vertical-line"></div>
</div>
</div>
</div>
</td>
<td>94</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.wrapper {
width: auto;
height: auto;
}
.circle {
width: 50px;
height: 50px;
border-style: solid;
border-color: #000000;
border-radius: 100px;
position: relative;
margin: 0 auto 0 auto;
}
h5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
color: #000000;
}
.vertical-line {
width: 2px;
height: 100px;
background: #2ecc71;
margin: 0 auto 0 ;
}
hr {
border: 0;
height: 1px;
background: #333;
background: linear-gradient(to right, #ccc, #333, #ccc);
}
</style>
</html>
Make sure the container is of 100% and that left is correct:
<html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container {
width: 100%;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: -20px;
}
</style>
</html>
How about something like this? Note that in order for this to work reliably, I gave your table row (the tr element) a fixed height.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 10px;
}
.firstRow {
position: relative;
background-color: red;
}
.circle {
position:absolute;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
top: -30px;
transform: translateX(-50%);
left: calc(100%);
}
.circleText {
text-align: center;
display: block;
left: 50%;
top: 20px;
transform: translateY(50%);
}
<html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve
<div class="firstRow">
<div class="circle">
<div class="circleText">test</span>
</div>
</div>
</td>
<td>Eve's last name</td>
<td>94</td>
</tr>
</table>
</html>
I created a working demo. It is fully working.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.main-container{
display:flex;
width:100%;
}
.container {
display:flex;
justify-content: center;
flex-direction:column;
align-items:center;
flex:2;
}
.container:before, .container:after {
content: "";
background: #000;
width: 1px;
height: 20px;
}
.circle {
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
display:flex;
justify-content: center;
align-items:center;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>
<div class="main-container">
<div style="flex:1">
<div>Monday</div>
<div>March 6, 2020</div>
<div>from Tokyo</div>
</div>
<div class="container">
<div class="circle">test</div>
</div>
<div>
<div>Monday</div>
<div>March 6, 2020</div>
<div>from Tokyo</div>
</div>
</div>
</td>
<td>94</td>
</tr>
</table>
The key lessons here are:
an extra relatively positioned element is not necessary for absolutely positioning the circle. we can just put the position: relative on the <td> itself.
use transform: translate() to position the circle elements without need for arbitrary pixel values
This solution uses the least CSS possible and standard (semantic) <table> markup
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: solid 1px #666;
padding: 2em 4em;
position: relative;
}
.circle {
font-size: 0.75em;
background: #fff;
border: solid 1px #aaa;
border-radius: 50%;
width: 4em;
height: 4em;
box-shadow: 1px 1px 4px #aaa;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
<table>
<tr>
<td>XYZ</td>
<td>
MAR 2
<span class="circle">
10<br>Days
</span>
</td>
<td>MAR 11</td>
<td>9</td>
</tr>
<tr>
<td>ABC</td>
<td>
MAR 6
<span class="circle">
20<br>Days
</span>
</td>
<td>MAR 15</td>
<td>11</td>
</tr>
</table>
Codepen
Related
I coded a table and this table has so much information in it that if the page is on 100% more than half of the table is missing.
I hope you can help me. You have to add more of the table cells to recreate it.
body {
min-height: 100vh;
background-color: var(--body-color);
transition: var(--tran-05);
background-color: #18191a;
--body-color: #18191a;
--sidebar-color: #242526;
--primary-color: #3a3b3c;
--primary-color-light: #3a3b3c;
--toggle-color: #fff;
--text-color: #ccc;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
justify-content: center;
width: 75%;
padding: 2%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #201f1b;
}
table.content thead tr {
background-color: #403f46;
color: white;
font-weight: bold;
text-align: left;
}
table.content th,
table.content td {
padding: 12px 16px;
}
table.content tbody tr {
border-bottom: 1px solid #ccc;
}
table.content tbody tr:last-of-type {
border-bottom: 2px solid #403f46;
}
table.content tbody tr.active {
font-weight: bold;
color: #403f46;
}
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>
The problem is because of this:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
it calculates -50% on the y-axis, which results in a cut. This works fine, but not for long elements.
Instead of this, just using a div as a wrapper around the table.
Update your code like the following:
Html:
<div class="wrapper">
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>
</div>
css:
div.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
width: 75%;
padding: 2%;
color: #f9f9f9;
}
now it should work correctly.
I'm trying to acheive the following (taken from dropbox):
My snippet (in full page):
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
Here you go...
The easiest way to achieve this circle with the letter "i" inside is to use Font Awesome icon. Move the icon to the left by setting margin-left: -25px;. You have to set z-index: 100; (the value is not important, it could be 1) to push the icon in front of everything else. It's necessary to set position: absolute;, otherwise the z-index won't work. Also, set background-color: white; so that the line of the table isn't visible in the background of the icon (try to remove the background-color to see what I'm talking about).
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th,
td {
border: 1px solid black;
padding: 1rem !important;
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px;
height: 250px;
/* Don't forget this, required for the stickiness */
}
.fa-info-circle {
position: absolute;
background-color: white;
font-size: 20px;
margin-top: -7%;
margin-left: -24%;
z-index: 100;
}
<!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.0'>
<title>Document</title>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<table style='margin-top: 150px; margin-left: auto; margin-right: auto;'>
<thead>
<tr class='red'>
<th> <i class='fas fa-info-circle'></i> </th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style='display: flex; align-items: center; width: 100%;'>
<span>
<div style='display: inline-block; width: 22px; height: 22px; margin-left: -11px;'>
<button style='width: 22px; height: 22px; display: block; background: transparent;' aria-label='More info'></button>
</div>
</span>
<span style='margin-left: 15px; display: flex;'>Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
</body>
</html>
You can simply do that by setting the position attribute of the button to absolute and then use it to position according to its ancestor
Here is an MDN Link to know more about this
Add this CSS code to your file and it will work
button{
position: absolute;
left: -12px;
}
I added <span class="information">i</span> into your 1st td and then added the CSS as below:
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
DEMO
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="information">i</span>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
This will work for u
* {
margin: 0px;
padding: 0px;
}
td {
position: relative;
padding: 40px;
border: 1px solid;
margin: 0px;
font-family: 'arial';
}
td a {
font-family: initial;
position: absolute;
font-size: 22px;
font-style: italic;
text-decoration: none;
left: -5%;
top: 38%;
height: 25px;
width: 25px;
text-align: center;
border-radius: 50%;
color: black;
background-color: white;
border: 1px solid;
}
table {
margin: 50px;
border-collapse: collapse;
}
<table>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
</table>
I have a piece of CSS I am working with. Whenever I add the "display: flex" property to .student, the border suddenly doubles. I need the flex property because I want the text to be centered vertically next to the image inside of the .student table data cell. How can I get rid of this pesky double border? The double border goes away whenever I remove the display:flex property, but then the text is no longer vertically next to the image. I've tried whitespace, border collapse, and several others without any luck.
Codepin: https://codepen.io/dansbyt/pen/dyvoejG?editors=1100
CSS:
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px; left: 0;
width: 100vw; height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;}
/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}
/* Table heading styling */
thead th {
height: 60px; width: 100px;
top: 0; z-index: 2;
position: -webkit-sticky; position: sticky;
border-right: 1px solid gray;
background-color: white;}
thead th:first-child {left: 0; z-index: 10;}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray}
table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
background-color: white}
td.late{background-color: #EA5D6B}
td input {
text-align: center;
padding: 4px; margin: 0;
width: 114px;
border: none;}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
.pic img{display: none}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px; left: 0;
width: 100vw; height: 56px;
border-top: 1px solid #DDDDDD}
HTML:
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
Image of issue:
Instead of using border: 1px solid gray you can try this.
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px;
left: 0;
width: 100vw;
height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;
}
/* Table styling*/
table {
table-layout: fixed;
border-collapse: collapse;
}
/* Table heading styling */
thead th {
height: 60px;
width: 100px;
top: 0;
z-index: 2;
position: -webkit-sticky;
position: sticky;
border-right: 1px solid gray;
background-color: white;
}
thead th:first-child {
left: 0;
z-index: 10;
}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray
}
table .duedate {
font-size: 14px;
margin-bottom: 8px
}
table .title {
font-size: 18px;
color: #5B7042
}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
td.late {
background-color: #EA5D6B
}
td input {
text-align: center;
padding: 4px;
margin: 0;
width: 114px;
border: none;
}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: -1px;
}
.pic {
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;
}
.pic img {
display: none
}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px;
left: 0;
width: 100vw;
height: 56px;
border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
My assumption is that problem arises from clashing between two layout alghorithms, table and flex one. Td belongs to table one and putting flex there just make problems.
So only solution is to wrap td content with div, and put flex onto that div.
table{
border-collapse: collapse;
}
td{
border: 1px solid;
}
.flex{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<th>flex</th>
<th>flex</th>
<tr>
<td class='flex'>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td class='flex'>...</td>
</tr>
</table>
<table>
<th>div flex</th>
<th>div flex</th>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
</table>
</body>
</html>
I have an HTML document with a stylesheet referenced in a link tag. The character set is UTF-8 and is defined in the HTML and CSS files. In Chrome and Microsoft Edge, the CSS renders as it should, however in Firefox and IE it doesn't load it. There aren't any errors in the Console of Developer tools and no compilation errors in the IDE I am using.
I can go directly to the CSS file using the absolute file path in the URL bar and it will display the contents of the file, and it will render the HTML just fine. The CSS will render when I enclose it in style tags in the HTML file itself. However, I want to link tag it for organization.
I cannot find the solution anywhere even though many people have had this issue. I'm wondering if there is a known solution to this that could help me.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="\css\core-test.css" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar">
<a>#</a>
</nav>
<div class="table-box">
<div class="table-body">
<table id="main-table" class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>TOTAL</th>
<th>OI</th>
<th>IV</th>
<th><button id="filterbtn" class="filterbtn fa fa-filter"></button></th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
</tbody>
</table>
<div id="option-modal" class="option-modal">
<div id="option-modal-box" class="option-modal-box">
<span id="closebtn" class="closebtn">×</span>
<div id="option-modal-header" class="option-modal-header">
<a id="option-modal-header-title" class="btc-color option-modal-header-title">BITCOIN</a>
</div>
<div id="option-modal-body" class="option-modal-body">
<div id="chart-box" class="chart-box">
<div class="box-header">
<a class="box-title">Chart</a>
</div>
<div style="background-color: gray;" class="box-body">
<a>chart-box</a>
</div>
</div>
<div id="orderbook-box" class="orderbook-box">
<div class="box-header">
<a class="box-title">Orderbook</a>
</div>
<div class="box-body">
<div class="orderbook-bid-body">
<table id="orderbook-bid-table" class="orderbook-bid-table">
<thead>
<tr>
<th>TOTAL</th>
<th>SIZE</th>
<th>BID</th>
</tr>
<tbody>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
</tbody>
</thead>
</table>
</div>
<div class="orderbook-ask-body">
<table class="orderbook-ask-table">
<thead>
<tr>
<th>ASK</th>
<th>SIZE</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
</table>
</div>
</div>
</div>
<div id="stat-box" class="stat-box">
<div class="box-header">
<a class="box-title">Greeks</a>
</div>
<div class="box-body">
<table id="greek-table" class="option-modal-table">
<thead>
<tr>
<th>MARK</th>
<th>OI</th>
<th>IV</th>
<th>DELTA</th>
<th>THETA</th>
<th>VEGA</th>
<th>GAMMA</th>
</tr>
</thead>
<tbody>
<tr>
<td id="mark-greek">0.031</td>
<td id="oi-greek">1120.0</td>
<td id="iv-greek">60.9%</td>
<td id="delta-greek">-0.2</td>
<td id="thelta-greek">-9.0</td>
<td id="vega-greek">1.23</td>
<td id="gamma-greek">0.00012</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="trade-box" class="trade-box">
<div class="box-header">
<a class="box-title">Recent Trades</a>
</div>
<div class="box-body">
<table id="trade-table" class="option-modal-table">
<thead>
<tr>
<th>PRICE</th>
<th>IV</th>
<th>SIZE</th>
<th>TIME</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.032</td>
<td>60.9%</td>
<td>1</td>
<td class="call-color">00:12:34</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var optionModal = document.getElementById("option-modal");
var chartButton = document.getElementsByClassName("chartbtn");
var closeButton = document.getElementById("closebtn");
function openChart() {
optionModal.style.display = "block";
}
for (var i = 0; i < chartButton.length; i++) {
chartButton[i].addEventListener("click", openChart);
}
window.onclick = function(event) {
if (event.target == optionModal) {
optionModal.style.display = "none";
}
}
closeButton.onclick = function(event) {
if (event.target == closeButton) {
optionModal.style.display = "none";
}
}
</script>
</html>
Here is the CSS:
#import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
#charset "utf-8";
:root {
--bg: #060c17;
--item-bg: #0c1427;
--main-font-color: white;
--border: #262f43;
--th-bg: black;
--th-font: #7886a1;
--btc: #ff8133;
--eth: #106fb7;
--call: #10b759;
--put: #ff3366;
--main-font: 'Overpass', sans-serif;
}
.container {
display: flex;
flex-direction: column;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0;
background-color: var(--bg);
}
.navbar {
position: fixed;
padding: 20px;
top: 0;
right: 0;
left: 0;
width: 100%;
text-align: center;
background: var(--item-bg);
border-bottom: 1px solid var(--border);
}
.navbar a {
color: var(--main-font-color);
font-size: 20px;
font-family: var(--main-font);
}
.table-box {
display: flex;
border-radius: 0.25rem;
margin-top: 75px;
margin-bottom: 1px;
height: 100%;
width: 99%;
background-color: var(--item-bg);
border: 1px solid var(--border);
overflow: hidden;
}
.filterbtn {
color: var(--th-font);
background-color: var(--th-bg);
font-size: 14px;
border: none;
cursor: pointer;
}
.table-body {
position: relative;
margin-top: 40px;
width: 100%;
overflow: auto;
border-top: 1px solid var(--border);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.table thead {
color: var(--th-font);
}
.table tbody {
color: var(--main-font-color);
}
.table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.chartbtn {
font-size: 14px;
border: none;
border-radius: 0.25rem;
cursor: pointer;
color: var(--th-font);
background-color: var(--th-bg);
}
.table thead th,
.table tbody td {
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid var(--border);
}
.table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.btc-color {
color: var(--btc);
}
.eth-color {
color: var(--eth);
}
.call-color {
color: var(--call);
}
.put-color {
color: var(--put);
}
.option-modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 20px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.option-modal-box {
display: flex;
margin: auto;
height: 95%;
width: 90%;
background-color: var(--item-bg);
border: 1px solid var(--border);
border-radius: 0.25rem;
overflow: hidden;
}
.closebtn {
padding-top: 0.5%;
right: 6%;
cursor: pointer;
font-size: 20px;
font-family: var(--main-font);
position: fixed;
color: var(--main-font-color);
}
.option-modal-header {
position: fixed;
margin: 5px;
}
.option-modal-header-title {
position: sticky;
font-family: var(--main-font);
font-size: 20px;
}
.option-modal-body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 40px;
height: 90%;
width: 100%;
background-color: var(--item-bg);
overflow: auto;
}
.option-modal-body div {
min-width: 50%;
}
.orderbook-bid-body {
display: inline-table;
}
.orderbook-bid-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-bid-table thead {
color: var(--th-font);
}
.orderbook-bid-table tbody {
color: var(--main-font-color);
}
.orderbook-bid-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-bid-table thead th,
.orderbook-bid-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-collapse: collapse;
}
.orderbook-bid-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.orderbook-ask-body {
float: right;
}
.orderbook-ask-table {
position: relative;
padding-bottom: 10px;
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-ask-table thead {
color: var(--th-font);
}
.orderbook-ask-table tbody {
color: var(--main-font-color);
}
.orderbook-ask-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-ask-table thead th,
.orderbook-ask-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.orderbook-ask-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.option-modal-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.option-modal-table thead {
color: var(--th-font);
}
.option-modal-table tbody {
color: var(--main-font-color);
}
.option-modal-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.option-modal-table thead th,
.option-modal-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
}
.option-modal-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
#media screen and (max-width: 800px) {
.chart-box {
width: 100%;
}
.orderbook-box {
width: 100%;
}
.stat-box {
order: 4;
width: 100%;
}
.trade-box {
width: 100%;
order: 3;
}
}
.chart-box {
height: 50%;
overflow: hidden;
}
.orderbook-box {
height: 50%;
overflow: hidden;
}
.stat-box {
height: 49%;
overflow: hidden;
}
.trade-box {
height: 49%;
overflow: hidden;
}
.box-header {
height: 6%;
padding: 5px;
}
.box-title {
color: var(--main-font-color);
font-family: var(--main-font);
font-size: 16px;
margin: auto;
}
.box-body {
border: 1px solid var(--border);
height: 89%;
overflow: auto;
}
Could the backslashes be the problem?
<link rel="stylesheet" type="text/css" href="/css/core-test.css" media="screen">
Try changing them to forward slashes.
I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside td tags in order to look it nice? The result I have now is here:
Current result with no position formatting
I want it to look like like this:
The way it's supposed to look
I've tried to do it with CSS formatting using relative position feature like this
.leftSide
{
position: relative;
bottom:250px;
}
And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of td tag, but then I do it, elements are out of the table). How can I avoid it?
My whole code below:
.splitTable {
width: 100%;
height: 100%;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
border-collapse: collapse;
width: 30%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
position: relative;
bottom: 250px;
}
.rightSide {
position: relative;
bottom: 250px;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest" width="25%">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Hope, this helps :)
.splitTable {
width: 100%;
height: 100vh;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
position: relative;
width: 50%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
margin-top:30px;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
display: flex;
flex-direction:flex-end;
position: absolute;
top: 20px;
width:90%;
left:50%;
transform:translateX(-50%);
}
.leftSide>* {
flex: 1;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
margin: 5px;
border-collapse: collapse;
}
.rightSide {
position: absolute;
top: 20px;
left:50%;
transform:translateX(-50%);
width:90%;
}
.addButton {
float:right;
margin-right:5%;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>