Dynamically Changing Table Cell Width - javascript

I want to implement both vertical and horizontal scrollable table using two tables from this jfiddle link. The table will display data from mysql database. The header of the first table is combined with the body of the second table. CSS is used to align the two tables together. Now I want the cells in a specific column to be equal width depending on the width of the longest cell.For example using pseudo code below.
if(col1.row1.cellWidth > col1.row2.cellWidth)
{
col1.cellWidth = col1.row1.cellWidth;
}
Below is the html table code:
<div class="table-header" id="headerdiv">
<table id="headertable" width="100%" cellpadding="0" cellspacing="20%">
<thead>
<tr>
<th class="center"><strong>Name</strong></th>
<th class="center"><strong>Department</strong></th>
<th class="center"><strong>Unit</strong></th>
<th class="center"><strong>Time Booked</strong></th>
<th class="center"><strong>Purpose</strong></th>
</tr>
</table>
</div>
<div class="table-body" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<?php
if($stmt->execute()) {
// output data of each row
while($rows = $stmt->fetch(PDO::FETCH_ASSOC)){ ?>
<tbody>
<tr>
<td class="center"><?php echo $rows['first_name']." ".$rows['last_name']; ?></td>
<td class="center"><?php echo $rows['department']; ?></td>
<td class="center"><?php echo $rows['unit']; ?></td>
<td class="center" >
<input name="booking_time" type="datetime-local" id="booking_time" value="<?php echo myDate($rows['booking_time']); ?>" size="15">
</td>
<td class="center"><?php echo $rows['purpose']; ?></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
</div>
Below is the css code
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:80px;
overflow: visible;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
}
.table-header {
float:left;
width: 100%;
overflow:hidden;
}
.table-body {
float:left;
height: 100%;
width: inherit;
overflow-y: scroll;
padding-right: 16px;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width:120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}

Related

Display extra info upon clicking a row in a table

I essentially have a table with rows and upon clicking a row, I would like a popUp box to appear. I have the div/HTML code for it. However, I am not sure how to implement the backend code of it.
1.) User clicks row
2.) It gets extra info from that row: For example, the row is only displaying $transactionID and $transactionAmount. Then the user clicks a row, a box pops up displaying the $transactionID, $transactionAmount, $transactionDate and $reference
How do I go about doing this? I am completely confused and have attempted to look everywhere to find a solution but can't seem to find any similar examples
document.addEventListener("DOMContentLoaded", () =>{
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () =>{
// Not sure what to do here
})
})
})
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr data-href='$value'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
}
</tbody>
</table>
</div>
This was my approach but it doesn't work correctly: It won't actually update the values when clicked. Upon clicking a row, it will constantly display the same values from the first row of the table
function displayTransaction() {
var x = document.getElementById("transactionBox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
#transactionBox{
position: relative;
display: none;
overflow: hidden;
}
transactionBox_class{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transition: opacity 500ms;
opacity: 0;
}
.wrapper{
margin: 150px auto;
padding: 20px;
background: #e7e7e7;
border-radius: 5px;
width: 15%;
position: relative;
transition: all 5s ease-in-out;
}
.wrapper h2{
margin-top: 0;
color: #333;
}
.wrapper .close{
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.wrapper .content{
max-height: 30%;
overflow: auto;
}
.container{
border-radius: 5px;
background-color: #e7e7e7;
padding: 20px 0;
}
form label{
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}
.container p{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr onclick='displayTransaction()'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox'>
<div class='wrapper'>
<h2>Transaction Details</h2>
<div class='content'>
<div class='container'>
<form>
<label>Transaction ID:</label>
<p>$transactionID</p>
<label>Amount:</label>
<p>$transactionAmount</p>
<label>Date:</label>
<p>$transactionDate</p>
<label>Reference:</label>
<p>$reference</p>
</form>
</div>
</div>
</div>
</div>";
}
?>
</tbody>
</table>
</div>
</body>

You can create a class called visible or something and add it to the children in the when it gets clicked.
You can use element.classList.add("my-class"); to add a class (.remove("myclass") to remove it)

After analyzing your foreach loop I can see that there are some rows of the table getting populated but the id remains the same for every transaction division that is transactionBox which is why you are getting only first row which is the first element with the id.
Solutions :-
Create a dynamic ID for each of the row's transaction division.
echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
<div class='wrapper'>
<h2>Transaction Details</h2>
Use custom attribute but yaah unique.
echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
<div class='wrapper'>
<h2>Transaction Details</h2>
The working examples are below.
function showDetails_1(elem){
var actual_elem = "#transaction_"+elem;
console.log(actual_elem)
$(actual_elem).attr("style","display:block");
}
function showDetails_2(elem){
var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]";
console.log(actual_elem);
$(actual_elem).attr("style","display:block");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=3>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_1(433)">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction_433">
Yo..! here are the details_1
</div></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction" transaction-type="433">
Yo..! here are the details_2
</div></td>
</tr>
</table>

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>

change css using JS

I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>

Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>

fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}

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>

Dynamically bind check boxes and button on click using jQuery

Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.

You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});

Categories