We Keep Coding

CSS Printing: Avoiding cut-in-half table between pages?

Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.
body {
opacity: 0;
}
#media print {
* {
-webkit-print-color-adjust: exact !important;
}
#font-face {
font-family: "YekanWeb";
src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
url("../fonts/YekanWeb-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#page {
margin-top: 0;
margin-bottom: 0;
padding-top: 1cm;
padding-bottom: 1cm;
}
h2.right-border {
background-color: #f3f5f7;
border-color: #42b983;
padding: 7px 10px;
border-right-width: 0.6rem;
border-right-style: solid;
margin: 1rem -15px;
}
body {
padding-top: 15px;
padding-bottom: 15px;
direction: rtl !important;
text-align: right !important;
font-family: "YekanWeb", arial, sans-serif !important;
}
.table-prices {
break-inside: avoid;
}
body {
opacity: 1 !important;
display: grid !important;
}
table {
page-break-inside: avoid;
}
table {
font-family: "YekanWeb", arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: right;
padding: 2px 8px;
font-weight: 700;
}
.table-invoice tr:nth-child(even) {
background: rgb(241 241 241 / 50%) !important;
}
.reports {
padding: 20px 10px;
font-family: "YekanWeb", "Calibri", "Adobe Arabic";
background: rgb(255, 255, 255);
}
.rep_header {
color: #555;
width: 100%;
height: 100px;
padding-bottom: 10px;
}
.container.rep_header {
border-bottom: 2px solid #333;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
margin-top: 20px;
width: 100%;
text-align: center;
}
.rep_header_logo {
margin: 0px 0px 0px 0px;
display: block;
float: right;
height: 90px;
text-align: right;
}
.rep_header_logo img {
height: 100%;
position: relative;
}
.rep_header_title {
margin: 0px 40px 0px 0px;
float: right;
display: block;
height: 100px;
text-align: right;
}
.rep_header_title h2 {
font-size: 32px;
text-align: right;
line-height: 90px;
vertical-align: middle;
}
.rep_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 150px;
text-align: right;
font-size: 13px;
}
.inv_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 140px;
text-align: right;
font-size: 12px;
}
.rep_body {
display: block;
width: 100%;
}
.rep_body_content {
display: block;
width: 100%;
}
.rep_overview {
padding: 0px;
}
.rep_description {
margin: 14px 0px 12px;
}
.paneldiv {
padding: 0px 1%;
}
.table-reports {
margin: 10px 0px 20px;
}
.table-reports tr th,
.table-reports tr td {
padding: 2px 8px;
vertical-align: top;
}
.table-reports thead tr th {
background: rgb(241 241 241 / 50%);
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tfoot tr th {
background: #eee;
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tr {
font-size: 12px;
}
.table-reports tr:nth-child(even) {
background: #efefef;
}
.rep_wait {
width: 100%;
text-align: center;
margin-top: 130px;
margin-bottom: 130px;
font-size: 40px;
color: #ccc;
}
.rep_no_result {
display: block;
width: 100%;
text-align: center;
margin: 150px 0px;
font-size: 21px;
color: #999;
}
.invoice_heading {
display: block;
width: 98%;
margin: 30px 1%;
font-size: 16px;
}
.in_info {
width: 20%;
text-align: left;
display: block;
float: left;
left: 0px;
}
.or_datetime {
margin: 15px 0px 15px 0px;
font-size: 12px;
color: #777;
font-weight: normal !important;
}
.cu_in_table {
width: 100%;
}
.cu_in_table tr td {
border: 1px solid #999;
font-size: 14px;
padding: 2px 6px;
font-weight: 700;
}
.invtablediv {
display: block;
padding: 0px !important;
}
.table-invoice {
width: 100%;
}
.table-invoice tr th {
padding: 1px 8px;
vertical-align: top;
text-align: center;
border: 1px solid #c2bfbf;
font-size: 12px;
font-weight: 700;
}
.table-invoice tr td {
font-size: 14px;
padding: 3px 8px 2px;
vertical-align: top;
text-align: right;
font-weight: 700;
border: 1px solid #cfcfcf;
}
.table-invoice thead tr th {
background: #ddd;
font-weight: 700;
font-size: 14px;
line-height: 24px;
direction: rtl !important;
text-align: right !important;
}
.table-itemreceipt thead tr th {
line-height: 16px !important;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
background: #e9e9e9;
font-weight: 700;
font-size: 11px;
line-height: 20px;
direction: rtl !important;
text-align: right;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
}
.table-invoice tr {
font-size: 10px;
}
.inv_stamp {
display: block;
padding: 0px 0px;
float: right;
width: 100%;
margin: 15px 0px;
font-size: 12px;
font-weight: 700;
}
.inv_desc {
display: block;
padding: 0px 4px;
margin: 0px 0%;
font-weight: 700;
}
.table-prices {
float: left;
max-width: 50%;
width: min-content;
}
.table-prices th {
white-space: nowrap;
}
.table-prices tr {
background: rgb(241 241 241 / 50%);
}
.inv_verify {
display: block;
padding: 0px 4px;
width: 56%;
width: 100%;
height: 120px;
margin: 10px 0%;
}
.inv_notesdiv {
display: block;
padding: 0px 4px;
float: right;
width: 98%;
margin: 20px 0%;
font-size: 10px;
}
.inv_note {
display: block;
width: 100%;
margin: 8px 0%;
}
.rep_footer {
display: block;
float: right;
width: 80%;
text-align: center;
color: #ccc;
margin-top: 30px;
}
.inv_footer {
background: #fff;
position: fixed;
bottom: 10px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #555;
line-height: 16px;
}
.invz_footer {
border-top: 2px solid #333 !important;
background: #fff;
position: fixed !important;
bottom: 4px !important;
margin-top: 60px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #777;
line-height: 16px;
}
.invz_footer .company_desc,
.invz_footer .company_contact,
.invz_footer .company_address {
display: block;
float: right;
text-align: right;
font-size: 12px;
}
.invz_footer .company_desc {
width: 40%;
}
.invz_footer .company_contact {
width: 30%;
}
.invz_footer .company_address {
width: 30%;
}
.transaction-block {
display: block;
width: 98%;
margin: 0px 1%;
font-size: 14px;
}
.tr_date table tr td {
padding-left: 4px;
}
.tr_titles {
margin-top: 10px;
}
.tr_titles table tr td {
padding-left: 4px;
}
.tr_desc_table {
width: 100%;
margin-top: 20px;
}
.tr_desc_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd;
border: 1px solid #c2bfbf;
}
.tr_desc_table tbody tr td {
padding: 4px 0;
text-align: center;
border: 1px solid #cfcfcf;
}
.narrations {
margin-top: 20px;
}
.blank_line_label {
display: inline-block;
width: 80px;
}
.blank_line {
display: inline-block;
width: 450px;
border-bottom: 2px solid #aaa;
margin: 0 10px;
}
.verification_area {
width: 100%;
display: block;
margin-top: 20px;
}
.verification_area .tr_titles {
width: 100%;
display: block;
text-align: center;
}
.verification_area .signatures {
display: inline-block;
width: 15%;
margin: 80px 4% 20px;
padding-top: 6px;
border-top: 1px solid #999;
}
.tr_cost_table {
width: 100%;
font-size: 14px;
margin-top: 20px;
}
.tr_cost_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd i !important;
}
.tr_cost_table tbody tr td {
padding: 4px 0;
text-align: center;
}
.tr_cost_table tfoot tr td {
line-height: 26px;
background: #e4e4e4 !important;
}
.bs_tr_s td {
line-height: 0.3rem !important;
}
.table-prices tr th:first-child {
text-align: left !important;
width: 192px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
<link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>
<body onload="window.print()">
<div class="container rep_header">
<header class="rep_header">
<div class="rep_header_logo"><img src="/img/default/logo.png"></div>
<div class="rep_header_title">
<h2>شرکت تجارتی شایق علیمی لمیتد</h2>
</div>
<div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
</header>
</div>
<div class="container mt-5">
<h2 class="right-border">معلومات آقر</h2>
<div class="row justify-content-between">
<table class="cu_in_table pull-left">
<thead>
<tr>
<td style="width:20%;">سریال نمبر: </td>
<td style="width:80%;">
WB-101
</td>
</tr>
</thead>
<tbody>
<tr>
<td>عنوان:</td>
<td><span class="cu_name">Ducimus do illo id</span>
</td>
</tr>
<tr>
<td>تاریخ نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
</tr>
<tr>
<td>تاریخ آفرگشایی:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس آفرگشایی: </td>
<td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
</tr>
<tr>
<td>تاریخ ختم پیشنهاد:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>شماره شناسایی آقر:</td>
<td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
</tr>
<tr>
<td>مرجع مربوطه:</td>
<td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
</tr>
<tr>
<td>تضمین آفر:</td>
<td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<h2 class="right-border">لیست محصولات</h2>
<div class="row justify-content-between">
<div class="invtablediv">
<table class="table-invoice">
<thead>
<tr>
<th style="width:4%; text-align: center !important;">#</th>
<th style="width:14%; text-align: center !important;">نام محصول</th>
<th style="width:15%; text-align: center !important;">مقدار</th>
<th style="width:10%; text-align: center !important;">فی واحد</th>
<th style="width:15%; text-align: center !important;">مجموع</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Armando Welch</td>
<td>6348</td>
<td>3</td>
<td>19044</td>
</tr>
<tr>
<td>2</td>
<td>2021 سوپر</td>
<td>109980</td>
<td>12</td>
<td>1319760</td>
</tr>
<tr>
<td>3</td>
<td>Cruz Lee</td>
<td>10235</td>
<td>30</td>
<td>307050</td>
</tr>
<tr>
<td>4</td>
<td>Armando Welch</td>
<td>36</td>
<td>2222</td>
<td>79992</td>
</tr>
</tbody>
</table>
<br>
<table class="table-prices text-right float-left">
<thead>
<tr>
<th>قیمت مجموعی اجناس :</th>
<th style="width:142px;">1725846 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">ارزش آقر :</th>
<th>614624 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تامینات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">مالیات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">انتقالات :</th>
<th>0 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">خدمات :</th>
<th>1444 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تخفیف :</th>
<th>1111222 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">قیمت نرخ دهی :</th>
<th>1725846 AFN</th>
</tr>
</thead>
</table>
<div class="inv_stamp pull-left margin-top-30" style="width:50%;">
<div class="inv_desc">
ملاحضات:<br>
<div class="inv_desc_detail">
به تعداد (4) قلم جنس برای محترم/محترمه
"ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
آفر تهیه شده است.
</div>
</div>
<div class="inv_verify margin-top-30">
مهر و امضاء:<br>
<div class="inv_desc_detail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
شرکت شایق علیمی</span>
</div>
</div>
</body>
<script>
</script>
</html>

You need to add margins to your page like this:
#page {
margin: 72px 72px 138.24px 72px;
}
and also add these style to avoid breaking your table
table {
page-break-inside: avoid;
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
table tfoot thead {
break-inside: auto;
overflow: hidden;
}

Accordion doesn't open properly

I have this accordion. Everything is ok except opening. When I press one, it opens both. I need to open just that one which I click and when I click second I want to hide first. Need to make it toggle
When I change display:flex to column it works properly but in row it opens both on click. It doesn't make sense for me what is logic behind it.
$(document).ready(function(){
$('.accordion-list > li > .answer').hide();
$('.accordion-list > li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});
});
ul.accordion-list {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
height: auto;
padding: 20px;
margin: 0;
list-style: none;
background-color: #f9f9fa;
}
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
}
ul.accordion-list li.active h3:after {
transform: rotate(45deg);
}
ul.accordion-list li h3 {
font-weight: 700;
position: relative;
display: block;
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0;
font-size: 15px;
letter-spacing: 0.01em;
cursor: pointer;
}
ul.accordion-list li div.answer {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
cursor: pointer;
}
ul.accordion-list li div.answer p {
position: relative;
display: block;
font-weight: 300;
padding: 10px 0 0 0;
cursor: pointer;
line-height: 150%;
margin: 0 0 15px 0;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-list">
<li>
<h3>info</h3>
<div class="answer">
<table style="width: 100%; text-align: center;">
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjjkkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjk:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkj</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkjj,00€</td>
</tr>
</table>
</div>
</li>
<li>
<h3>second</h3>
<div class="answer">
<table style="width: 100%; text-align: center;">
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">jkkjk</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjlj</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkljlk</td>
<td class="cell" style="float: right; padding-right: 1rem;">jlklkjljk€</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">ljklkjljk:</td>
<td class="cell" style="float: right; padding-right: 1rem;">20.12.2025</td>
</tr>
</table>
</div>
</li>
</ul>

It is a CSS problem. The parent is flex, that is why it is giving all the available space to li when set to auto. Just set height of li to fit-content or min-content or max-content:
ul.accordion-list li {
height: fit-content;
}

This is not a jQuery problem but a CSS one.
I've been experimenting in JSFiddle and changing the height of the LI from auto to min-content seems to work:
height: min-content;
https://jsfiddle.net/6w9j84rm/
You can clearly see the effect by disabling the jQuery code.

Set the rule margin-bottom: auto for ul.accordion-list li. This rule has excellent cross-browser compatibility!
And it works well.
It should be like this:
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
margin-bottom: auto;
}

Sequence scroll animation

In the begining I have to say I am pure newbie in coding (especially in JS and jQuery) and I have a problem that I really cannot solve since few days.
I want to create sequence animation that will be animated depending on scroll position. I found the source online with the code for that ---> THIS https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/ <-- The thing is I have a massive problem to put them togheter...
I would love to have this scrolabble animation on the right side of the page (div called "right") but whenever I am doing this, the animation is not running...
Below you can see my code.
Would be more than happy to hear from you guys with some help!
$(document).ready(function() {
$(document).mousemove(function(e) {
$('.project1').offset({
left: e.pageX + 20,
top: e.pageY + 20
});
});
$(".numero1").hover(function () {
$('.project1').css({opacity : 1.0});
},
function () {
$('.project1').css({opacity : 0.0});
}
);
});
body {
background-color:#ffffff;
font:300 Arial, sans-serif;
top:0px;
margin: 0;
padding: 0;
cursor: url('./img/dot1.ico'), auto;
overflow:hidden;
}
*{
border:none;
}
a{
text-decoration:none;
}
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: black;
}
a:hover{
color: black;
font-family: Arial;
font-style:italic;
}
.left a{
color: black;
font-family: Arial;
font-style: italic;
}
.left a:hover{
color: black;
font-family: Arial;
font-style: normal;
}
li {
list-style-type: none;
}
#container {
display: flex;
overflow: hidden;
height: 100vh;
padding-top: 100px;
position: fixed;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left,
.middle,
.right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left::-webkit-scrollbar,
.middle::-webkit-scrollbar,
.right::-webkit-scrollbar {
display: none;
}
.left {
top: 15px;
font:300 45px Arial, sans-serif, white;
font-style: normal;
line-height: 1em;
color: white;
width: 2.7%;
margin-left: 0px;
padding-left: 15px;
margin-top: -100px;
background-color: white; /* Old browsers */
/* background: -moz-linear-gradient(top, #ffb2b2 0%, #849fff 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top, #ffb2b2 0%,#849fff 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #ffb2b2 0%,#849fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#849fff',GradientType=0 ); /* IE6-9 */
border-right: 0.5px solid black;
}
.middle {
width: 28%;
padding: 10 10 0 0;
margin-top: -110px;
margin-bottom: 100px;
background-color: white;
border-right: 0.5px solid black;
}
.projects img{
width: 100%;
}
.right {
flex: 1;
padding: 0 0 0 0;
margin-top: -100px;
margin-bottom: 100px;
font: Arial, sans-serif;
background-color: white ;
font-size: 0px;
color: black;
}
.right img{
width: 100%;
}
.gallery {
margin-top: 0px;
}
.projects {
position: relative;
margin-top: 5px;
height: 70px;
padding-bottom: 50px;
font:300 22px Arial, sans-serif;
color: black;
cursor: url('./img/dot.ico'), pointer;
border-bottom: 0.5px solid black;
}
#container figure {
background: black;
margin: 0px;
line-height: 0px;
}
#container figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#container figure:hover img {
opacity: 0;
}
table .numero1{
width: 100%;
text-align: left;
}
table .numero2{
width: 100%;
text-align: left;
}
table .numero3{
margin-top: 0px;
width: 100%;
text-align: left;
}
table .numero4{
margin-top: 0px;
width: 100%;
text-align: left;
}
.numero {
padding-right: 1%;
margin-top: -5px;
width:5%;
font-size: 33px;
/* -webkit-text-stroke: 0.5px black;*/
}
.title {
padding-left: 3%;
width: 40%;
padding-right: 1%;
}
.type {
width: 30%;
padding-left: 10%;
}
.year {
width: 5%;
padding-left: 1%;
}
.project1 {
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
opacity: 0;
height: 150px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Name</title>
<meta charset="utf-8" />
<link rel="icon" href="./img/sm.png" type="image/gif" />
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="responsiveslides.min.js"></script>
</head>
<body>
<div id="container">
<div class="left">
<a style="cursor: url('./img/dot.ico'), pointer;" href="index.html">N<br>A<br>M<br>E</a>
</div>
<div class="middle">
<div class="gallery">
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<div class="right">
</div>
</div>
</body>

Reduce the font size of span text when two lines

var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>
AIM:
Reduce the font size of span when two lines to make it one line. (Telephone Number span)
Found this post and copied the solution but when i implement it, it is reducing the font size infinitely i guess because the browser stops.
I commented the while loop to make the browser not hang. I even added an if statement but it no help

you should try white-space property
.wrapper span{ white-space: nowrap;}
var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
.wrapper span{ white-space: nowrap;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>

Vertical align not working CSS/HTML

I'am trying to verticaly align my page, but I just cant get it to work.
I've tried other solutions from other questions, but none of them worked for me so far, does anyone know why?
This is the HTML code I want to align vertically:
header {
margin: 0 auto;
width: 600px;
margin-bottom: 3em;
margin-top: 3em;
text-align: center;
}
section {
width: 600px;
margin: 0 auto;
padding: 3px;
background-color: white;
}
#textbox {
color: #075488;
border: solid 3px #075488;
}
#textbox div {
font-weight: bold;
border-bottom: 2px solid #075488;
margin-left: 3em;
margin-right: 3em;
padding-left: 2em;
padding-right: 2em;
padding-top: 1.5em;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
#textbox table {
font-weight: normal;
width: 100%;
padding-right: 5em;
padding-left: 4em;
padding-bottom: 1em;
margin: 0 auto;
line-height: 1;
}
td:nth-child(3) {
width: 100px;
}
td:nth-child(2) {
text-align: center;
}
section p {
color: white;
font-size: 12px;
float: right;
}
<header id="header">
<img src="images/image.png">
</header>
<section id="section">
<div id="textbox">
<div>test</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
Does anyone know a solution for this?
Thanks you!
If CSS isn't possible is it possible to use jQuery/Javascript instead, if so how would I go abouts doing so?

You could set position: absolute on your body, and center it via:
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari */
transform: translate(-50%, -50%); /* Other browsers */
}
(remember to remove top margin on header)
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header {
margin: 0 auto;
width: 600px;
margin-bottom: 3em;
text-align: center;
}
section {
width: 600px;
margin: 0 auto;
padding: 3px;
background-color: white;
}
#textbox {
color: #075488;
border: solid 3px #075488;
}
#textbox div {
font-weight: bold;
border-bottom: 2px solid #075488;
margin-left: 3em;
margin-right: 3em;
padding-left: 2em;
padding-right: 2em;
padding-top: 1.5em;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
#textbox table {
font-weight: normal;
width: 100%;
padding-right: 5em;
padding-left: 4em;
padding-bottom: 1em;
margin: 0 auto;
line-height: 1;
}
td:nth-child(3) {
width: 100px;
}
td:nth-child(2) {
text-align: center;
}
section p {
color: white;
font-size: 12px;
float: right;
}
<header id="header">
<img src="http://placehold.it/600x50">
</header>
<section id="section">
<div id="textbox">
<div>test</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>

In order to use vertical alignment you have to provide heights to your elements. Your elements currently do not have a set height, so their height is the minimum that will contain their contents, and thus they do not stretch to your page height

You can just say:
td {text-align: center}
http://jsfiddle.net/k30se3fv/3/