We Keep Coding

Change JavaScript code to only expand next row, not all next rows in table

I'm very new to this and trying to work out how something works that someone previous to me has implemented and I need to alter.
We have a table with say 3 or 4 headers and at present one row below it.
JavaScript is used so that upon clicking on a row, it expand to display the next row.
What I'm trying to do is have another table within one of the rows that only shows after expanding.
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
So with this you can see that upon selecting the first row of data it expands and shows the next row. The table within that row, is collapsed and you have to expand this.
Main question is, how can I change this so that the 2nd table is not collapsed? (I'm not bothered about collapsing it)
There are a lot of different methods of achieving this but every single one I find, doesn't seem to fit what I need.
EDIT WITH ORIGINAL CODE SNIPPET
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function(){
$('#report66 tr.information-row').toggle();
});
});
</script>
<style>
.new table {
table-layout: fixed;
width: 100% ;
}
</style>
<?php
if($replacementpending >= 1)
{
echo "<h4><center><b>Network | Pending Acceptance</b></center></h4>";
$sql = "SELECT * FROM `stock`.`replacements.joblog` WHERE `status` = 'Pending' AND `ownership` = 'Stock' ORDER BY `id` ASC";
$retval = mysqli_query( $conn, $sql );
if(! $retval ) {
die('Could not get data: ' . mysqli_error());
}
echo
"<table border='1'>
<table id='report66'>
<tr>
<th style='background-color:#003033'>DB Ref</th>
<th style='background-color:#003033'>Ticket Ref</th>
<th style='background-color:#003033'>Item Requested</th>
<th style='background-color:#003033'>Customer</th>
<th style='background-color:#003033'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></th>
</tr>";
while($row = mysqli_fetch_array($retval)) {
echo "<tr>";
echo
"<td>{$row['id']}</td>".
"<td>{$row['req_ticketref']}</td>".
"<td>{$row['req_model']}</td>".
"<td>{$row['req_customer']}</td>".
"<td style='table-layout: fixed; width: 3%'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></td>";
}
echo
"
<tr class='information-row' style='background-color:#00181a'>
<td colspan='8' style='background-color:#00181a'>
";
echo "
<center><h4><b>Additional information</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>CI Name</th><td>{$row['ciref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Requested By</th><td>{$row['req_name']}</td><tr>
<th style='background-color:#003033;text-align:right'>Ticket Reference</th><td>{$row['req_ticketref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Customer</th><td>{$row['req_customer']}</td><tr>
<th style='background-color:#003033;text-align:right'>Date/Time Logged</th><td>{$row['datetimelogged']}</td><tr>
</table>
<br>
<legend></legend>
<h4><b>Delivery Details</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>End User Company Name</th><td>{$row['endusername']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 1</th><td>{$row['address1']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 2</th><td>{$row['address2']}</td><tr>
<th style='background-color:#003033;text-align:right'>City</th><td>{$row['city']}</td><tr>
<th style='background-color:#003033;text-align:right'>Post Code</th><td>{$row['postcode']}</td><tr>
<th style='background-color:#003033;text-align:right'>Country</th><td>{$row['country']}</td><tr>
</table>
<br>
</center>
</td>
</tr>
";
}
echo "</table>";
}
?>

When you do $("#report66 tr:not(.odd)").hide(); you actually hide all tr elements inside the main table, which do not have the .odd class name. Since you have another table inside the main one, this rule applies to the tr elements in it.
You can explicitly show all rows in the inner table:
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr table tr").show(); // Show all inner table rows
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
EDIT
If you want to have multiple visible cells, which toggle the visibility of the information row right after the row they are in, the script can be simplified and you can add a specific class to that row:
$(document).ready(function () {
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function () {
$(this).next().toggle();
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information 2
Information 2
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>

jQuery table body with custom scrollbar

I am using the jquery library to create a custom scrollbar - https://codepen.io/dragospaulpop/pen/asBcI
I created a simply example but the critical needed is to make the table fill to the rest of the page (without activating the standard browser scrollbar).
My code is:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
I want to make the table's height: page_height-red_div_height (the size of page could be changed so it could be as percent). So the perfect solution is that red_div has always the same height but the height of the table is not const (could change by the windows size).
I tried to change the css by removing height: 150px; from the tbody and put there height: 100%; but the result was wrong - the standard browser scrollbar was activated instead of the custom scrollbar. Then I tried to change css of .fixed_headers tbody but it does not work as well.
How is it possible to solve this issue?
Is there any alternative jQuery plugin that allows to:
-scroll only tbody
-add tbody content dynamically
-declare elements (td, tr, tbody) sizes as percents
-auto scroll programaticaly (to initial position)

Get image to overlay on top of table

I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});

You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle

Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>

Trying to make fixed table headers with horizontal scroll bar. How to set overflow: auto, but keep margins transparent?

I am trying to make a table with fixed headers and horizontal scrolling functionality, but to do so I need to make the "section"'s top margin transparent in what I have here:
html, body {
margin:0;
padding:0;
height:100%;
}
.section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
margin-top: 37px;
}
.container {
margin-top: -37px;
overflow-y: auto;
height: 200px;
}
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;
margin-top:-37px;
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;
}
<div class="section">
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6212/
Thanks in advance to anyone with suggestions!
P.S. I would like a pure css solution, please!

I decided to remove most of your css to (hopefully) give a clearer answer to this question. I did however not change any of your html.
Fiddle with code
x-scrolling and width
This method relies on using the "table" as a container for "thead" and "tbody". "table" will determine the scrolling along the x-axis. Therefore it has "overflow-x: auto". This way the "thead" can stay positioned above the "tbody" while scrolling the table. (will be explained later)
This element also determines the width the table will take up on your webpage.
In order for the content to scroll horizontally we have to make sure the total width of "tbody" and "thead" is longer than the width of "table".
Finally you should also add the same width to your cells so the headers appear properly above your data. I did this by applying a width to "tr th:nth-child(1), tr td:nth-child(1)" (for each column).
y-scrolling and height
We want the "thead" to stay positioned on top of our table. Even when we scroll. Therefore we simply convert it to a block element.
The "tbody" is another story. we want to be able to vertically scroll it. Therefore we add "overflow-y: auto" and also set a fixed height for the element (otherwise it will just drop down and not scroll).
The total height of the table will be the height of "thead" and "tbody". The "table will adapt its size to fit it."
The CSS (html is the same as it is in the question post)
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th div{display: none;} /*why is this html even here!?!?*/
table {
display: block;
position: relative;
border: 1px solid #000;
width: 75%;
border-spacing: 0;
margin: auto;
overflow-x: auto;
}
thead{
display: block;
position: relative;
width: 700px; /*total width of columns*/
}
tbody{
display: block;
position: relative;
height: 250px;
overflow-y: auto;
width: 700px; /*total width of columns.*/
}
tr th:nth-child(1), tr td:nth-child(1){
width: 100px;
}
tr th:nth-child(2), tr td:nth-child(2){
width: 150px;
}
tr th:nth-child(3), tr td:nth-child(3){
width: 450px;
}
PS: I assume this is what you were trying to ask.

how to give space between tr tag and divide by | in html

Hi in the below code how to give the space to two tr rows and i want to divide with this symbol.and background color should occupy the full table.first row no need this | i want to divide all the left side row with full | symbol and then right side td's
can any one help me
Expected output:
About Us | Latest News
Facilities Events
Doctors Gallery
Our Blogs Contact Us
html
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
css
#slider1 footer {
background-color:#00008B;
width:100%;
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}

see this: http://jsfiddle.net/ze0587d0/
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
td{
padding:5px;
}
.border-right{
border-right:1px solid #000;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class='border-right'>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
just add a class for the first td, where you want | sign, and the css border-right:1px solid #000;
Edit:
According to the comment by OP,
If you want all td's having a saperation with |, see this: http://jsfiddle.net/ze0587d0/2/
you need to add a border-right to all tds which are first-child of tr,
tr td:first-child{
border-right:1px solid #000;
}
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
tr td:first-child{
border-right:1px solid #000;
}
td{
padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td >About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

I think this is what you are after...it uses your pseudo-element but positions it absolutely.
#slider1 footer {
background-color: #00008B;
width: 100%;
color: white;
}
#slider1 table {
table-layout: fixed;
}
#slider1 footer tr td {
padding: 0 1rem;
position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
position: absolute;
right: 0;
content: "|";
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>