This question already has answers here:
overflow:hidden not working when using tables
(4 answers)
Closed 5 years ago.
Here is some kinda complicated html table formatting I have:
http://jsfiddle.net/nyCKE/8517/
The problem is that the "Subject Areas" table does not work when I try to do overflow scroll. It has a height set to 200px, but when I add many rows to the table, it doesn't stay at 200, it just keeps extending the table. As you can see on the jsfiddle, I have tbody set to overflow-y scroll (I want the thead to be fixed). But, it refuses to scroll. The "Classes" table has no data so it stays at 200px. That is what I want the height of the subject areas table to be, but clearly it is bigger. Here is some of the relevant css:
tbody {
overflow-y scroll;
}
.subjects{
width:100%;
height: 200px;
}
.classes {
width:100%;
height: 200px;
margin-top: 5px;
}
Another thing I forgot to mention is I have 2 div's, one for left and one for right. The left div contains the subjects and classes tables. The right div contains the overview. This is for when the window is bigger and by extending the window in the fiddle, you can see that the overview table goes to the right, which is what I want. I am not sure if these div's mess up the tbody scrolling.
Does anyone know how to solve my problem?
Bug in your css:
tbody {
overflow-y scroll;
}
should be:
tbody {
overflow-y: scroll;
}
Solution to your problem: define your height directly at child and use display: block
tbody {
overflow-y: scroll;
display: block;
height: 200px;
}
body {
background: #6CD3F8;
/*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}
h3 {
color: white;
text-align: left;
margin-top: 20px;
}
.scan {
padding: 0% 10%;
}
table {
background: #E0F7FE;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
table td,
table td * {
vertical-align: top;
}
tbody {
overflow-y: scroll;
display: block;
height: 200px;
}
th {
color: #265C82;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
padding-left: 5px;
padding-top: 5px;
}
td {
padding-left: 10px;
}
::-webkit-input-placeholder {
color: #00B2F3;
}
.search {
color: #00B2F3;
border: 0px solid red;
border-radius: 10px;
width: calc(100% - 10px);
height: 35px;
margin-top: 5px
}
.select {
width: calc(100% - 10px);
}
.icon {
width: 20px;
height: 20px;
margin: 2px 8px 0px 5px;
float: left;
}
hr {
border-color: #00B2F3;
margin: 3px 0;
width: calc(100% - 5px);
}
.subjects {
width: 100%;
height: 200px;
}
.classes {
width: 100%;
height: 200px;
margin-top: 5px;
}
.sections {
width: 100%;
height: 405px;
}
.left {
width: 50%;
float: left;
margin-right: 5px;
margin-bottom: 3%;
min-width: 300px;
}
.right {
width: calc(50% - 10px);
float: left;
min-width: 300px;
margin-bottom: 3%;
}
.mid {
width: 100%;
text-align: center;
float: left;
position: relative;
}
.wrapper {
width: 100%;
text-align: right;
float: left;
position: relative;
}
.logo {
max-width: 30%;
margin: 10px 0px;
}
.links > a {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding: 0px 10px;
}
.links {
/*padding-left: 100px;*/
padding-bottom: 10px;
}
<body>
<div class="scan">
<h3>Summer Session A</h3>
<!-- <div class="left">
left
</div> -->
<!-- <div class="right">
right
</div> -->
<div class="left">
<table class="subjects">
<thead>
<tr>
<th>
<div>Subject Areas</div>
<hr>
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<!-- <select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> -->
<!-- <tr>
<td>
<select class="form-control select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr> -->
</tbody>
</table>
<table class="classes">
<thead>
<tr>
<th>
Classes
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table class="sections">
<thead>
<tr>
<th>
Overview
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
You can wrap the table in a container and give the height and overflow to the container.
body {
background: #6CD3F8;
/*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}
h3 {
color: white;
text-align: left;
margin-top: 20px;
}
.scan {
padding: 0% 10%;
}
table {
background: #E0F7FE;
}
table,
.tableContainer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
table td,
table td * {
vertical-align: top;
}
tbody {
overflow-y scroll;
}
th {
color: #265C82;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
padding-left: 5px;
padding-top: 5px;
}
td {
padding-left: 10px;
}
::-webkit-input-placeholder {
color: #00B2F3;
}
.search {
color: #00B2F3;
border: 0px solid red;
border-radius: 10px;
width: calc(100% - 10px);
height: 35px;
margin-top: 5px
}
.select {
width: calc(100% - 10px);
}
.icon {
width: 20px;
height: 20px;
margin: 2px 8px 0px 5px;
float: left;
}
hr {
border-color: #00B2F3;
margin: 3px 0;
width: calc(100% - 5px);
}
.subjectsContainer {
height: 200px;
overflow: scroll;
}
.subjects {
width: 100%;
}
.classes {
width: 100%;
height: 200px;
margin-top: 5px;
}
.sections {
width: 100%;
height: 405px;
}
.left {
width: 50%;
float: left;
margin-right: 5px;
margin-bottom: 3%;
min-width: 300px;
}
.right {
width: calc(50% - 10px);
float: left;
min-width: 300px;
margin-bottom: 3%;
}
.mid {
width: 100%;
text-align: center;
float: left;
position: relative;
}
.wrapper {
width: 100%;
text-align: right;
float: left;
position: relative;
}
.logo {
max-width: 30%;
margin: 10px 0px;
}
.links > a {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding: 0px 10px;
}
.links {
/*padding-left: 100px;*/
padding-bottom: 10px;
}
<body>
<div class="scan">
<h3>Summer Session A</h3>
<!-- <div class="left">
left
</div> -->
<!-- <div class="right">
right
</div> -->
<div class="left">
<div class="subjectsContainer tableContainer">
<table class="subjects">
<thead>
<tr>
<th>
<div>Subject Areas</div>
<hr>
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<!-- <select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> -->
<!-- <tr>
<td>
<select class="form-control select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr> -->
</tbody>
</table>
</div>
<table class="classes">
<thead>
<tr>
<th>
Classes
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table class="sections">
<thead>
<tr>
<th>
Overview
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Related
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>
Im facing two problems which are related with each other as i can assume. My webpage is not being fully displayed, a lot of content is hidden down and the scrollbar at the right side and the vertical one are not shown. I have tried to solve that with the overflow property in the body, the scrollbar was there but invisible so it didnt help me a lot. I want the content to be visible even though im zooming in(200% or whatever)
here is a snippet of my code
<nav class="sideBar">
<div class="sideBarHeader" id="wrapper">
<div class="dropdown">
</div>
<div class="ono">
<p style="font-size: 48px;">XXX</p>
</div>
</div>
<div style="padding-left: 2px;">
<div class="searchContainer">
</div>
</div>
</nav>
<div class="mainContentClient">
<div class="clientHeader">
</div>
<div class="clientContent"> <!-- the client content class is not defined yet -->
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;"></th>
</tr>
<tr style="background-color: #DEDEDE; height: 100px;">
<td style="border-bottom: 0;">STATS</td>
</tr>
</table>
<div style="height: 100%;" id="wrapper"> <!-- subcontent -->
<!-- left tables -->
<div class="leftClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="vehicle/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="cargounit/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
</div>
<!-- right table + Map -->
<div class="rightClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;" colspan="2">
info
</th>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
</th>
</tr>
<tr>
<td style="border-bottom: 0;"> <!-- map properties -->
<div id="Map" class="mapStyling"></div>
<script>
var lat = 47.35387;
var lon = 8.43609;
var zoom = 18;
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and the css :
.sideBar {
height: 100%;
width: 17%;
position: fixed;
top: 0;
left: 0;
background-color: #C0C0C0;
max-width: 250px;
min-width: 250px;
overflow: auto;
}
.sideBarHeader {
padding: 4% 8%;
padding-left: 10%;
height: 85px;
}
.clientHeader {
font-size: 48px;
height: 130px;
}
.mainContentClient {
position: fixed;
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
.ono {
width: 180px;
text-align: right;
/* keep the ono aligned, use a negativ margin*/
margin-top: -28%;
}
.clientContent {
height: 100%;
width: 1130px;
max-width: 1500px;
min-width: 1000px;
}
.leftClientContent {
width: calc(100% - 850px);
margin-top: 2%;
}
.rightClientContent {
width: 850px;
margin-top: 2%;
margin-left: 10px;
}
.mapStyling {
width: 102.5%;
height: 300px;
margin-left: -20px;
}
/* default settings for the tables in part management*/
table.onoTable{
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
}
table.onoTable th {
background-color: #FBD85C;
border-width: 0 10px;
border-color: #f1f1f1;
border-style: solid;
height: 62.5px;
font-size: 24px;
}
table.onoTable th:first-child {
border-left: 0;
}
table.onoTable th:last-child {
border-right: 0;
}
table.onoTable td {
border-width: 0 10px 4px 10px;
border-color: black #f1f1f1;
border-style: solid;
height: 50px;
font-size: 24px;
}
table.onoTable td:first-child {
border-left: 0;
}
table.onoTable td:last-child {
border-right: 0;
}
/**/
table.noBorder_1_2 td:nth-child(1) {
border-right: 0;
}
table.noBorder_1_2 td:nth-child(2) {
border-left: 0;
}
table.centerContent_24 th, table.centerContent_24 td {
text-align: center;
font-size: 24px;
}
tr.borderBottom_0 > td {
border-bottom: 0;
}
.backgroundColor_grey {
background-color: #DEDEDE;
}
/* shift the content of the main table of the management table a little bit to the right side*/
table.paddedManagementTableContent td {
text-align: left;
padding-left: 20px;
}
table.paddedManagementTableContent th {
text-align: left;
padding-left: 30px;
width:30%;
}
table.paddedManagementTableContent th:first-child {
text-align: left;
padding-left: 20px;
}
here is a live demo
https://jsfiddle.net/edwjvmsc/
thanks everyone!
Well, I'm not sure if this would be correct answer. but I removed the 'position:fixed' property from 'mainContentClient' class and the scrollbar is showing and you can scroll your content. Try it and let me know if it helped :).
.mainContentClient {
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
I'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other
What am I doing wrong? Any help or suggestion would be greatly appreciated!
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table></div>
</div>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
i used ur code and mould it little like wrapping tables inside div and add css accordingly
The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),
else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along white-space )
.Info {
display:table-cell;
}
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
/*display: block;*/
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish.
This is a simple layout~
HTML
<section class="tableGrid">
<div>
<div>
<p>Row 1 - Table 1</p>
</div>
<div>
<p>Row 2 - Table 1</p>
</div>
</div>
<!-- ********************** -->
<div>
<div>
<p>Row 1 - Table 2</p>
</div>
<div>
<p>Row 2 - Table 2</p>
</div>
</div>
</section>
and CSS
.tableGrid {
margin: 4vh 8vw;
padding: 16px;
display: grid;
grid-template-rows: auto;
grid-gap: 16px;
}
.table {
border: 4px dotted red;
}
#media (min-width: 800px) {
.tableGrid {
margin: 8vh 16vw;
padding: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
grid-gap: 24px;
}
}
Check out this pen and if you like what you see learn more about using grid here.
I've checked about 50 links in the past 20 minutes and tried every combination of stuff I can think of but there is still this massive automatic gap between my th elements, as seen in the picture below.
The test column will eventually be removed so that item has a colspan of 2, but in the mean time I cannot figure out how to remove this gap.
As you can see, item and test are very close, which is what I want. The rest are miles apart, and it's getting extremely annoying that I cannot solve this.
Picture: http://i.imgur.com/Herr27e.png
Markup & CSS:
Both generated from HAML and SCSS respectively.
<div class="ticker">
<h2>NEW LISTINGS</h2>
<div class="ticker-body">
<table id="new-listings">
<thead>
<tr>
<th>Item</th>
<th>test</th>
<th>Seller</th>
<th>Seller Wants</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujp</td>
<td>Something Else Here</td>
</tr>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujpdsds</td>
<td>Something Else Here</td>
</tr>
</tbody>
</table>
</div>
</div>
.ticker
{
.ticker-body
{
margin-top: 10px;
border: 1px solid $type25Border;
#include transition( border 0.2s ease-in-out );
&:hover
{
border: 1px solid $greenText;
}
}
}
table#new-listings
{
width: 645px;
color: $whiteText;
thead
{
font-family: "opensans-SB";
font-size: 14px;
th
{
padding-top: 15px;
padding-bottom: 8px;
}
}
th, td
{
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}
tbody
{
tr
{
font-family: "opensans-R";
font-size: 12px;
//border-top: 1px solid $type35Border;
&:nth-child(odd) { background-color: $type60Background; }
&:nth-child(even) { background-color: $type70Background; }
.item-image
{
width: 45px;
height: 32px;
.item-image-container
{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url( "src/hornmask.png" );
border: 1px solid $type35Border;
box-shadow: $softShadow;
}
}
}
}
}