Develop Reference

Close other div when new is clicked

So I have this table with a menu dropdown, but I'm having trouble getting the divs close when I click on one of the other menu dropdown divs. This is because the JS looks for a click inside/outside of the class, but how can I change this?
I'm trying to avoid the user from opening multiple dropdown menus at the same time, like this:
Here is the working code to see the problem.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
/* MENU DESIGN */
.dropbtn {
background-color: #2F2F35;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8D90A1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="tr1">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">⋮</button>
<div id="menu_1" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr2">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">⋮</button>
<div id="menu_2" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr3">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">⋮</button>
<div id="menu_3" class="dropdown-content">
Edit
Remove
</div>
</tr>
</tbody>
</table>
So the solution is to rewrite the JS to listen for the div ID and then close the other open/shown classes I guess, but how?

Thanks to the comment
Either find the element that currently has the class show and then remove that class, before you set it for the current one; or remember what element you added the class to the previous time, and then remove it from that. – CBroe
the solution was created here:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
/* MENU DESIGN */
.dropbtn {
background-color: #2F2F35;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8D90A1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="tr1">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">⋮</button>
<div id="menu_1" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr2">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">⋮</button>
<div id="menu_2" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr3">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">⋮</button>
<div id="menu_3" class="dropdown-content">
Edit
Remove
</div>
</tr>
</tbody>
</table>

Hello just tried below code and worked,
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
clearDropdown();
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
clearDropdown();
}
}
function clearDropdown() {
const boxes = document.querySelectorAll('.dropdown-content');
boxes.forEach(box => {
box.classList.remove('show');
});
}

mobile version filter is not showing properly

I made filter based on selection in input. It shows only items with same category on click. On desktop version when I click for example "Others" it will list only tr with Others in category but when I resize on mobile version and press filter, so nothing happen. All tr's are still showing. Really don't have idea what is difference between mobile and desktop version when JS is working with same code in both views.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>

Your code works well, but the problem is with rule display: block, which is in the media query. in the table.vypis tr selector. This rule overrides another block hiding rule. You need to remove display: block out of table.vypis tr.
#media screen and (max-width: 800px) {
...
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
...
}
Or a second solution:
Add! !important to rule display: none, selector tbody tr.hidden. It should look like this:
tbody tr.hidden {
display: none!important;
}
I advise you to use the second solution!

Bootstrap responsive table with fixed headers on all device sizes?

I currently have this Bootstrap table and the problem I'm facing is that the sticky headers aren't working without removing the Bootstrap .table-responsive class. Is this possible without using JS?
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-fixed {
width: 100%;
}
/* This will work on every browser but Chrome Browser */
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #FFF;
}
/*This will work on every browser*/
.table-fixed thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-fixed">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
</table>
</div>

position sticky doesn't work with some table elements (thead/tr) in Chrome. You have added sticky position in thead and th both. try below steps.
remove stick position from thead and keep only in th
Add overflow-x: visible for table-responsive class.
Thanks

See the below code to make table header sticky
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border
</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
</tr>
</tbody>
</table>
</div>
</section>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width: 100%;
}
td+td {
border-left: 1px solid #eee;
}
td,
th {
border-bottom: 1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
</style>

Add rows and columns to the table on click with javascript

I am completely new to JavaScript, so, sorry for asking this simple question. The point is that there have been numerous similar questions here and on other platforms. I've tried all solutions provided but neither of them worked in my case. I assume that this is because of my CSS, otherwise I do not know what is the reason. I tried different methods: insertRow, clone etc. neither of them worked.
The point is that my program needs to add row or column to the table on click on the buttons. Right button should add column to the right of the table, bottom button should add row to the bottom of the table.
// append row to the HTML table
function appendRow() {
var tbl = document.getElementById('my-table'), // table reference
row = tbl.insertRow(tbl.rows.length), // append table row
i;
// insert table cells to the new row
for (i = 0; i < tbl.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
};
// create DIV element and append to the table cell
function createCell(cell) {
var div = document.createElement('div'), // create DIV element
cell.appendChild(div); // append DIV to the table cell
};
// append column to the HTML table
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
};
#canvas {
align-content: center;
height: 1000px;
}
#my-table {
margin: 0 -2px -2px 0;
border: #FFF;
border: 1px solid rgb(72, 170, 230);
display: inline-block;
}
tr {
background: rgb(72, 170, 230);
}
td {
width: 50px;
height: 50px;
}
.add {
height: 52px;
width: 52px;
background: rgb(243, 165, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#addColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.add:hover {
background: rgb(246, 192, 82);
}
#addColumnChild {
line-height: 50px;
}
#addRow {
vertical-align: bottom;
margin: 0 0 0 2px;
}
#addRowChild {
line-height: 50px;
}
.del {
height: 52px;
width: 52px;
background: rgb(178, 0, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#delColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.del:hover {
background: rgb(202, 76, 73);
}
#delColumnChild {
line-height: 50px;
}
#delRow {
vertical-align: left;
margin: 0 0 0 2px;
}
#delRowChild {
line-height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Test task 1</title>
<body>
<!-- <div id="delColumn" class="del" onclick="appendColumn">
<div id="addColumnChild"><b>–</b></div>
</div>
<div id="delRow" class="del" onclick="appendRow()">
<div id="delRowChild"><b>–</b></div>
</div>-->
<table id="my-table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="addColumn" class="add" onclick="appendColumn">
<div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add" onclick="appendRow()">
<div id="addRowChild"><b>+</b></div>
</div>
How to make buttons work and actually add rows and columns?

Here you go with a solution (using jQuery) https://jsfiddle.net/gmzqe5kw/11/
$('#addColumnChild').click(function(){
$('#my-table tr').each(function(){
$(this).append(`<td></td>`);
});
});
$('#addRowChild').click(function(){
$('#my-table tbody').append(`<tr>${$('#default-row').html()}</tr>`);
});
#canvas {
align-content: center;
height: 1000px;
}
#my-table {
margin: 0 -2px -2px 0;
border: #FFF;
border: 1px solid rgb(72, 170, 230);
display: inline-block;
}
tr {
background: rgb(72, 170, 230);
}
td {
width: 50px;
height: 50px;
}
.add {
height: 52px;
width: 52px;
background: rgb(243, 165, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#addColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.add:hover {
background: rgb(246, 192, 82);
}
#addColumnChild {
line-height: 50px;
}
#addRow {
vertical-align: bottom;
margin: 0 0 0 2px;
}
#addRowChild {
line-height: 50px;
}
.del {
height: 52px;
width: 52px;
background: rgb(178, 0, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#delColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.del:hover {
background: rgb(202, 76, 73);
}
#delColumnChild {
line-height: 50px;
}
#delRow {
vertical-align: left;
margin: 0 0 0 2px;
}
#delRowChild {
line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
<tr id="default-row">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="addColumn" class="add">
<div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add">
<div id="addRowChild"><b>+</b></div>
</div>
Hope this will help you.

Use jQuery events and selectors:
As an example, to add a row, use general solution is of this form:
$(".some_selector").click(function () {
$("table.your_class").append("<tr> <td>col1</td> <td>col2</td> </tr>");
});
To add columns use:
similarly to add columns:
$(".some_selector").click(function () {
// Loop over the rows of the table and append the td tag
$("table.your_class tr").append("<td>col1</td>");
});

CSS link hover - how to expand area that changes colour upon hovering

I have this JS fiddle https://jsfiddle.net/658epj15/
.navChild:hover{
background-color:#626262;
}
When I hover over a link, the word has a background around it that illuminates, that is the length of the word.
How can I extend this so that it illuminates over the whole <td> and not just the div, so it illuminates from the left border of the <td> to the right border of the <td>?

Use tr td instead of .navChild
tr td:hover {
background-color: #626262;
}
https://jsfiddle.net/658epj15/2/
Update, regarding to your comment:
Pay attention to the following lines
tr td:hover, .current {
background-color: #626262;
}
and
<td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>
.navParent table {
color: #ffffff;
table-layout: fixed;
text-align: center;
position: absolute;
font-size: 20px;
border: none;
border-collapse: collapse;
width: 100%;
}
.navParent table td {
border-left: 1px solid #000000;
}
.navParent table td:first-child {
border-left: none;
}
.navParent a {
text-decoration: none;
color: black;
}
.navChild {
width: 100%;
height: auto;
}
tr td:hover,
.current {
background-color: #626262;
}
<div class="navParent">
<nav>
<table>
<tr>
<td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>
<td><a class="navChild" href=a bout.html>Nav 2</a></td>
<td><a class="navChild" href=l ocations.html>Nav 3</a></td>
<td><a class="navChild" href=p ricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

Instead of adding hover on a add hover on td
.navParent table{
color:#ffffff;
table-layout: fixed;
text-align:center;
position:absolute;
font-size: 20px;
border: none;
border-collapse:collapse;
width:100%;
}
.navParent table td{
border-left: 1px solid #000000;
}
.navParent table td:first-child{
border-left:none;
}
.navParent a{
text-decoration: none;
color:black;
}
.navChild
{
width: 100%;
height: auto;
}
.navParent td:hover{
background-color:#626262;
}
<div class = "navParent">
<nav>
<table>
<tr>
<td><a class = "navChild" href = billboard.html>Nav 1</a></td>
<td><a class = "navChild" href = about.html>Nav 2</a></td>
<td><a class = "navChild" href = locations.html>Nav 3</a></td>
<td><a class = "navChild" href = pricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

You want to display the a as a block element so it takes up the space of the cell that it is in. Also, you want to set the cellpadding on the table to 0 to eliminate the spacing around the text (you said you wanted it go border to border). This updated fiddle also fixes some incorrect HTML in the original (the closing table tag was wrong). https://jsfiddle.net/658epj15/3/
.navParent table {
color: #ffffff;
table-layout: fixed;
text-align: center;
position: absolute;
font-size: 20px;
border: none;
border-collapse: collapse;
width: 100%;
}
.navParent table td {
border-left: 1px solid #000000;
}
.navParent table td:first-child {
border-left: none;
}
.navParent a {
text-decoration: none;
color: black;
}
.navChild {
width: 100%;
height: auto;
display: block;
}
.navChild:hover {
background-color: #626262;
}
<div class="navParent">
<nav>
<table cellpadding="0">
<tr>
<td><a class="navChild" href=billboard.html>Nav 1</a></td>
<td><a class="navChild" href=about.html>Nav 2</a></td>
<td><a class="navChild" href=locations.html>Nav 3</a></td>
<td><a class="navChild" href=pricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

By default, your <a> tags are set to display: inline, and won't fill out the <td>. Set them to display: block, and the hover should work as expected.
Updated fiddle.