We Keep Coding

Focus text field inside the cell when cell is clicked

I want a textarea inside a cell to be focused when I click in the white area of the cell.
At the same time it is also possible to filter that the function is only applied to cells with the class: "use-keyboard-input".
Thanks!
function textareaFocus(){
$(this).find('textarea').each(function(){
$(this).focus();
});
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;"><td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td><td onclick="textareaFocus();" colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td><td onclick="textareaFocus(); colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td><td onclick="textareaFocus(); colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>

#Ali's answer is correct, you can also do it a bit more abstract way.
$('textarea').on('focus', function() {
console.log('textarea focused');
});
$('textarea').parent('td').on('click', function() {
console.log('cell clicked');
$(this).find('textarea:first-child').focus();
})
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;">
<td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td>
<td colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>

You need to pass a reference object to the function to determine which cell is clicked. So I updated the function to textareaFocus(obj) and passed td by adding (this) as a parameter to the function:
function textareaFocus(obj){
$(obj).find('textarea').focus();
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable" style="border: none;">
<tbody style="border: none;">
<tr style="height: 10em;">
<td colspan="3" style="background-color: var(--dark); width: 15%;">Cell-1:</td>
<td colspan="3" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="2" style="background-color: var(--dark); width: 15%">Cell-2</td>
<td onclick="textareaFocus(this);" colspan="3">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="3" style="background-color: var(--dark); width: 15%">Cell-3:</td>
<td colspan="4" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
</tr>
</table>
You can also do that without calling the function through onclick but by binding a listener to td elements:
$(document).ready(function(){
$(".use-keyboard-input").click(function(){
$(this).find("textarea").focus();
})
})

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;
}

How do I add lines for table tr like Tree

How can make side lines for every table tr, like tree structure?
Also, Nested tables will come in some of tr.
Sample code Fiddle Link:
#smsTree {
margin-top: 30px;
}
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:not(:last-child) + #smsTree tr:not(:first-child) {
content: "";
position: absolute;
left: 35px;
z-index: 100;
width: 20px;
height: 100px;
border-bottom: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}
<div id="smsTree">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)" style="text-decoration: none;"><strong>1mnthuser [Content Provider]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>BMS_MKT_608[Market Plan]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
css:
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}
Please check above fiddle link.
Snap of Design Tree structure:

Normally border does not apply to table border.you need to add border-collapse to table. You can use below code. specifications
table {
border-collapse: collapse;
}
table tr
{
border-left:1px solid black;
}

This a simple example that you want to achieve but it is done with a list. I never saw done with tables. Why? Because you can't control the space between the elements as effective as in a list and also because tables are just to display tabular data.
I edit the code and I added icons with font-awesome to be mo realistic with your design.
I hope helps
ul {
border-left: 1px dotted;
list-style: none;
padding-left: 12px;
}
li {
position: relative;
padding-left: 22px;
}
li::before {
background-color: #fff;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -12px;
top: 10px;
border-top: 1px dotted;
}
ul.tree > li:first-child::before {
width: 11px;
height: 10px;
left: -13px;
top: 0px;
border: 0;
border-bottom: 1px dotted;
}
li:last-child::before {
width: 11px;
height: 10px;
left: -13px;
}
ul.tree>li::after,
ul.tree>li>ul>li::after {
background-color: red;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -18px;
top: 6px;
z-index: 1;
}
ul.tree>li.open::after,
ul.tree>li>ul>li.open::after {
background-color: blue;
}
li ul {
margin: 5px 7px;
}
li i {
margin-right: 5px;
position: absolute;
top: 2px;
left: 2px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<ul class="tree">
<li class="open"><i class="fas fa-address-book"></i>06_midh_http_user
<ul>
<li class="open"><i class="fas fa-address-book"></i>BMS_MKT_303
<ul>
<li><i class="fas fa-address-book"></i>6d</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_304</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_305</li>
<li><i class="fas fa-address-book"></i>MS_MKT_307</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_308</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>1111</li>
<li><i class="fas fa-address-book"></i>1112</li>
</ul>

Multiple Sidenavs from multiple buttons?

I am working on a site that has five icons along the right side of the screen. In a perfect world, each icon when clicked would open its' respective sidenav.
For example:
MyBtn onclick opens sidenav and closes all other sideavs.
MyBtn2 onclick opens sidenav2 and closes all other sidenavs.
...and on...
However,
I currently have my five icons. Unfortunately, when any one icon is clicked; it opens sidenav5 rather than its' respective sidenav.
What am I missing here?
My thanks in advance for anybody who can help!
Relevant ode below... I do tend to use the style tag which I know is taboo:
document.getElementById("myBtn").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn2").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav2").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav2").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn3").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav3").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav3").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn4").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav4").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav4").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn5").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav5").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav5").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav {padding-top: 15px;}
#sidenav a {font-size: 18px;}
}
/**/
#sidenav2 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav2 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav2 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav2 {padding-top: 15px;}
#sidenav2 a {font-size: 18px;}
}
/**/
#sidenav3 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav3 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav3 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav3 {padding-top: 15px;}
#sidenav3 a {font-size: 18px;}
}
/**/
#sidenav4 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav4 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav4 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav4 {padding-top: 15px;}
#sidenav4 a {font-size: 18px;}
}
/**/
#sidenav5 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav5 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav5 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav5 {padding-top: 15px;}
#sidenav5 a {font-size: 18px;}
}
#main {
transition: margin-left .5s;
padding: -16px;
}
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav" class="sidenav">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav2" class="sidenav2">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/The Museum Line.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Museum Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav3" class="sidenav3">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Practice Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Practice Swords</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav4" class="sidenav4">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav5" class="sidenav5">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Squire Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>

Instead of just solving this issue I am going to attempt to save you a ton of headaches in the future. Your code can be cleaned up significantly. Inline styles and a function for every single item will become a nightmare to maintain in the future. I strongly recommend going a route similar to what I am showing below. It is worth noting that I left some of your stuff out to simplify it but it will work to add additional items as long as you follow the same pattern (which is a large part of the enhanced maintainability). Also, apologies if this isn't exactly what you want the menu to function like, I couldn't tell exactly from your code but you should be able to build from this concept
See the fiddle here
Html
<div class="sidenav">
<div class="icons">
<div class="icon">Nav 1</div>
<div class="icon">Nav 2</div>
<div class="icon">Nav 3</div>
</div>
<div class="nav-items">
<ul class="item-set">
<li>Early Swords</li>
<li>Roman Swords</li>
<li>Viking Swords</li>
<li>Medieval One Handed</li>
<li>Hand & a Half Swords</li>
<li>Medieval Two Handed</li>
<li>Single Edged Swords</li>
<li>Next Generation Scabbards</li>
</ul>
<ul class="item-set">
<li>One Handed Museum Line Swords</li>
<li>Two Handed Museum Line Swords</li>
<li>Museum Line Scabbards</li>
</ul>
<ul class="item-set">
<li>One Handed Practice Swords</li>
<li>Two Handed Practice Swords</li>
</ul>
</div>
</div>
CSS
.sidenav {
width:350px;
}
.icons {
width:50px;
float:left;
}
.icons .icon:hover {
cursor:pointer;
text-decoration:underline;
}
.nav-items {
width:300px;
float:right;
}
.nav-items {
overflow:hidden;
}
.nav-items ul {
margin-top:0px;
margin-left:-300px;
display:none;
}
.nav-items li {
list-style-type:none;
cursor:pointer;
}
And look how simple this Javascript/Jquery Is
$(document).ready(function()
{
slideRight($(".item-set").eq(0));
$(".icons .icon").click(function()
{
var idx = $(this).index();
slideLeft($(".item-set"));
slideRight($(".item-set").eq(idx));
});
});
function slideRight(elem) {
elem.show();
elem.animate({ 'marginLeft': '0px' }, 100);
}
function slideLeft(elem) {
elem.hide();
elem.css({ 'marginLeft': '-300px' });
}

I believe it is because you are using the same function on each of the click events.
document.getElementById("myBtn").addEventListener("click", open_close);
Therefore, when you're calling the function, it is calling the last implementation of it. Which in your case is the click event for "myBtn5".
A quick fix would be to rename each of the functions:
function open_close_1() {
Then for each onclick event call a different function: open_close_2 and so on.
.addEventListener("click", open_close_1);
This should stop it from calling the same function. I hope this helped!

Hi Try the below sample.
HTML:
<div class="sidebar sidebar-1 hidden">
<h3>
Sidebar 1
</h3>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div class="sidebar sidebar-2 hidden">
<h3>
Sidebar 2
</h3>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<button id="btn-1">One</button>
<button id="btn-2">Two</button>
CSS:
.hidden {
display: none;
}
.active {
display: block;
}
Script:
$('button').on('click', function() {
var btnElement = $(this).attr('id').split('-');
showSidebar(btnElement[1]);
});
function showSidebar(elem) {
var sidebar = $(document).find('.sidebar-' + elem);
$(document).find('.sidebar').addClass('hidden').removeClass('active');
$(document).find('.sidebar-' + elem).removeClass('hidden').addClass('active');
}
Fiddle Demo

Unlimited side navigation bars with less than 10 lines of JavaScript
Wow that's a lot of code!
I have wrote you a little script using jQuery that may help you do what you want a lot more efficiently.
Hope it helps.
$(function sideNav() {
$('#Head a').on('click', function () {
var link = $(this).data('nav');
$('.' + link).toggleClass('Slide');
});
$('.AsideWrap').on('click', function () {
$('.Slide').toggleClass('Slide');
});
});
/* Side Navigation
---------------------------------*/
.AsideWrap {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
z-index: 110;
}
#Aside {
position: absolute;
top: 0;
right: -200px;
height: 100%;
width: 200px;
-ms-flex-line-pack: start;
align-content: flex-start;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
text-align: center;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
z-index: 120;
}
#Aside a {
-webkit-display: flex;
-ms-display: flex;
display: -webkit-box;
display: flex;
-ms-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
position: relative;
padding: 5px 10px;
font:1em Centaur;
color:#111;
text-align: center;
text-decoration: none;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
text-transform: uppercase;
}
#Aside a:hover {
background: #fff;
color: #111;
}
.Slide {
opacity: 1 !important;
visibility: visible !important;
}
.Slide #Aside {
right: 0 !important;
}
.Flx {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Flx1 {
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="Head">
<a data-nav="Link1">Link1</a>
<a data-nav="Link2">Link2</a>
<a data-nav="Link3">Link3</a>
<a data-nav="Link4">Link4</a>
<a data-nav="Link5">Link5</a>
</header>
<div class="AsideWrap Link1">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>Early Swords</a>
<a>Roman Swords</a>
<a>Viking Swords</a>
<a>Medieval One Handed</a>
<a>Hand & a Half Swords</a>
<a>Medieval Two Handed</a>
<a>Single Edged Swords</a>
<a>Next Generation Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link2">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/The Museum Line.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Museum Line Swords</a>
<a>Two Handed Museum Line Swords</a>
<a>Museum Line Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link3">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Practice Swords</a>
<a>Two Handed Practice Swords</a>
</aside>
</div>
<div class="AsideWrap Link4">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>Early Swords</a>
<a>Roman Swords</a>
<a>Viking Swords</a>
<a>Medieval One Handed</a>
<a>Hand & a Half Swords</a>
<a>Medieval Two Handed</a>
<a>Single Edged Swords</a>
<a>Next Generation Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link5">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Swords</a>
<a>Two Handed Swords</a>
<a>Squire Line Scabbards</a>
</aside>
</div>

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/