We Keep Coding

Need Help Transferring Data Between HTML Tables [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have two tables, one with a list of players for you to choose with a checkbox and another where the players are supposed to appear after clicking the checkbox. There is also a div in table2 that subtracts the player's value from the set $35000 value.
When I click the checkbox, the player goes to table2 and the salary subtracts, like expected, but when I uncheck the checkbox, the player returns to table1 and the salary doesn't return back to $35000. Also it will not let click that same player again, so I was wondering what the problem may be.
Here's the Code Below:
$(document).ready(function() {
$('#table1 tbody tr td input.checkmark').on('click', function() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
});
$('body').on('click', '#table2 tbody tr td input.checkmark', function() {
if (!$(this).prop('checked')) {
var row = $(this).closest('tr').clone();
$('#tbody1').prepend(row);
$(this).closest('tr').remove();
}
});
})
//FUNCTION FOR TOTALING SALARY
function calc() {
var salary = $('[name="salary"]');
var sum = 35000;
$('[name="salary"]').each(function() {
if (this.checked) {
sum -= parseInt($(this).val());
}
$("#salary_total").val(sum);
});
};
//CLICK EVENT HANDLER
$(document).ready(function() {
$('[name="salary"]').on('click', calc);
});
<div class="table_container">
<table class="mytable" id="table1">
<caption><figure class="table_head">Players</figure></caption>
<thead><tr class="table1">
<th>Position</th>
<th> Name</th>
<th>FPPG</th>
<th>Salary</th>
<th>Game</th>
<th></th>
</tr></thead>
<tbody id="tbody1">
<tr class="table1">
<td>P</td>
<td>Stephen Strasburg</td>
<td>39.56</td>
<td>10,800</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10800"></td>
</tr>
<tr class="table1">
<td>P</td>
<td>Patrick Corbin</td>
<td>38.82</td>
<td>10,500</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10500"></td>
</tr>
<form id="playerForm">
<table class="mytable" id="table2">
<caption align="bottom">
<figure id="max">Max Salary: $35,000</figure>
<figcaption>
<button class="optimize_btn" id="optimizeButton">Optimize</button>
<button class="optimize_btn" id="reset">Clear</button>
</figcaption>
</caption>
<caption>
<figure class="table_head">My Team</figure>
<figcaption><div class="dollar">
<input name="calc" disabled="" class="salary_count good" id="salary_total" type="number" max="35000" value="35000"></div>
</figcaption>
</caption>
<thead><tr class="table2"></tr></thead>
<tbody id="tbody2">
</tbody>
</table></form>
.mytable{
background-color: blanchedalmond;
font-size: 20px;
overflow: scroll;
}
.table_head{
width:300px;
font-size: 2rem;
font-weight: bolder;
}
.mytable th:first-child {
padding-left: 10px;
}
.mytable tr {
padding-left: 10px;
}
.mytable tr td:first-child {
padding-left: 10px;
border-left: 0;
}
.mytable tr td {
padding: 8px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
border-bottom: 0;
}
.mytable tr:last-child td:first-child {
-moz-border-radius-bottom-left: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
-moz-border-radius-bottom-right: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
background: #f2f2f2;
transform: scale(1.01);
padding-left: 10px;
outline: 1px solid #191970;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
#footer{
background-color: hsl(291,5%,29%);
color: ivory;
text-align: center;
font-size: 0.8em;
font-variant:small-caps;
padding-top: 5px;
padding-bottom: 5px;
bottom:0;
width:100%;
clear: both;
margin: 0 auto;
}
#wrapper_lineup{
margin: 0 auto;
position: relative;
max-width: 1284px;
background-color: #fff;
}
.header{
text-align: center;
padding-bottom: 15px;
}
.table_container{width:1200px;margin:0 auto;}
table{
float: left;
}
.salary_count {
width: 120px !important;
padding: 7px;
display: inline-block;
border: 1px hidden;
border-radius: 4px;
font-family: brush-script-std;
font-weight: bold;
background-color: white;
font-size: 2.8rem;
}
.dollar{
display:inline-block;
position: relative;
font-size: 2.8rem;
font-family: brush-script-std;
color: black;
font-weight: bold;
}
.dollar input{
padding-left:15px;
}
.dollar:before {
position: absolute;
content:"$";
left:-10px;
top:8px;
}
#table1{
margin-right: 10px;
overflow: auto;
cursor: pointer;
}
#table2{
margin-left: 40px;
cursor: pointer;
}
.checkmark {
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
height: 25px;
width: 25px;
background-color: skyblue;
}
.over{
background-color: white;
color:red;
font-weight: bold;
}
div[comma-value]{
position:relative;
}
div[comma-value]:before{
content: attr(comma-value);
position:absolute;
left:0;
}
div[comma-value] input{
color:#fff;
}
.optimize_btn {
background: none;
border: 1px solid #dbdbdb;
cursor: pointer;
background-color: #11AAFF;
color: white;
font-family: 'Aaux-Next-Regular';
font-size: 20px;
width: 120px;
height: 50px
}
.optimize_btn:hover{
background-color: white;
color: black;
}
.choose{
color: black;
font-weight:lighter;
font-size: 2rem;
}
.select_pos{
color: deepskyblue;
font-weight:bolder;
font-size: 2rem;
}
#max{
color: black;
width:200px;
}

This is your offending line:
$('#table1 tbody tr td input.checkmark').on('click', ...)
^^ This is a statically run query select by jquery, meaning when you clone the rows back to your original table they are not the original dom elements so they no longer have this event handler.
What you'll want to do is write an addListener function that will take the table row and attach the appropriate event handlers to it. In this case:
$('#table1 tbody tr td input.checkmark').on('click', move_to_table2);
function move_to_table2() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
}
...
(inside table2's event handler)
var row = $(this).closest('tr').clone();
$(row).on('click', move_to_table2)
...
My example borks up the salary calculation but I think you can handle that!

Create a basic table with expanded row

I'm using Angular version 6 and want either an Angular solution or pure html/javascript solution for having a table with expanded rows.
So when you click a row it expands.
Note: I don't want to use angular material, jQuery or any third party.
This is my html table:
<table class="ex-table p3">
<thead class="ex-table__head">
<tr class="ex-table__row">
<th class="ex-table__cell">id</th>
<th class="ex-table__cell">First Name</th>
</tr>
</thead>
<tbody>
<tr class="ex-table__row" *ngFor="let item of data">
<td class="ex-table__cell">
{{item.od}}
</td>
<td class="ex-table__cell">
{{item.firstName}}
</td>
</tr>
</tbody>
</table>
I've attempted rowspan and colspan and nested tables but could'nt get that working.

Do you want something like below? . the rows can be expanded. even the whole table can be expanded at once.
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
function toggle(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
console.log(theButton.getAttribute("aria-expanded"))
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
}
}
function toggle1(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "false");
}
}
</script>
</head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
background: #fefefe;
color: #333;
margin: 0 1em;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
}
.process {
margin-top: 35px;
display: inline-block;
width: 10%;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
color: #fff;
font-style: normal;
font-weight: bold;
}
.row td:nth-of-type(2),
.cell td:nth-of-type(3) {
font-style: italic;
}
.row th:nth-of-type(3),
.row td:nth-of-type(3),
.cell th:nth-of-type(4),
.cell td:nth-of-type(4) {
text-align: right;
}
td[colspan] {
background-color: #f5f5f5;
color: #000;
font-weight: normal;
font-style: italic;
padding: 0;
text-indent: 0;
}
tr.shown,
tr.hidden {
display: table-row;
}
tr.hidden {
display: none;
}
.row button {
background-color: transparent;
border: .1em solid transparent;
font: inherit;
padding: 0.25em 0.5em 0.25em .25em;
width: 100%;
text-align: left;
}
.row button:focus,
.row button:hover {
background-color: #ddd;
outline: .2em solid #00f;
}
.row button svg {
width: .8em;
height: .8em;
margin: 0 0 -.05em 0;
fill: #66f;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.row button:hover svg,
.row button:focus svg {
fill: #00c;
}
/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cell button {
font-size: 60%;
color: #000;
background-color: #00f;
padding: 0.3em 0.2em 0 0.2em;
border: 0.2em solid #00f;
border-radius: 50%;
line-height: 1;
text-align: center;
text-indent: 0;
transform: rotate(270deg);
}
.cell button svg {
width: 1.25em;
height: 1.25em;
fill: #fff;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.cell button:hover,
.cell button:focus {
background-color: #fff;
outline: none;
}
.cell button:hover svg,
.cell button:focus svg {
fill: #00f;
}
/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
</style>
<table class="cell">
<caption>Dashboard</caption>
<thead>
<tr>
<th><button type="button" id="btnMSb" aria-expanded="false" onclick="toggle1(this.id,'#MS01b,#MS02b,#MS03b');" aria-controls="MS01b MS02b MS03b" aria-label="3 more from" aria-labelledby="btnMSb lblMSb">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button></th>
<th>Batch</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
<th>agreed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="btnMSb1" aria-expanded="false" onclick="toggle(this.id,'#MS01b');" aria-controls="MS01b" aria-label="3 more from" aria-labelledby="btnMSb1 lblMSb1">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch1</td>
<td>Green</td>
<td>10AM</td>
<td>11AM</td>
<td>11:30AM</td>
</tr>
<tr id="MS01b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #F1A9A9">Step2</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #E4FFAE">Step3</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #BFC6B9">Step4</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #87FEF8">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb2" aria-expanded="false" onclick="toggle(this.id,'#MS02b');" aria-controls="MS02b" aria-label="3 more from" aria-labelledby="btnMSb2 lblMSb2">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch2</td>
<td>Green</td>
<td>2AM</td>
<td>4AM</td>
<td>5AM</td>
</tr>
<tr id="MS02b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #DB2929">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #C0FF3E">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #5A6351">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #01C5BB">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb3" aria-expanded="false" onclick="toggle(this.id,'#MS03b');" aria-controls="MS03b" aria-label="3 more from" aria-labelledby="btnMSb3 lblMSb3">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch3</td>
<td>Amber</td>
<td>10AM</td>
<td>11AM</td>
<td>10:30AM</td>
</tr>
<tr id="MS03b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #1abc9c">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #3498db">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #34495e">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #2ecc71">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #9b59b6">Step5</div>
<div class='process' style="margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #e74c3c">Step6</div>
</div>
</td>
</tr>
</tbody>
</table>
</html>

Right Align Drop Down Menu from an Icon in a Table Header

I would like to open a dropdown menu, aligned to the right under an icon, that appears in a span on a table header.
This is what I get:
It aligns naturally left under the icon, but I can't find a good way to align it to the right.
This is what I actually want:
Some suggestions advise using right:0; and position the filter container as absolute. This is not good in my case since I want the icon in the table header cell to be aligned to the right of the cell. Setting the container to absolute makes it difficult to align the icon in the table header.
I'm looking for a pure CSS solution if possible. The widths of the table cells and the widths of the dropdown menu are not fixed, so I cannot align things by specifying "pixels".
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:black 1px solid;
border-radius:3px;
border-collapse: collapse;
box-shadow: 0 1px 2px #d1d1d1;
}
table, th, td {
border: 1px solid black;
}
table th {
width:150px;
}
.context-icon {
float:right;
cursor:default;
color: green;
padding-right: 10px;
padding-left: 10px;
//position: absolute;
}
.filter {
visibility: hidden;
display: block;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 2px 6px;
max-height: 0px;
z-index: 1000;
height:auto;
transition: visibility 200ms, max-height 200ms ease-in-out;
//right:0;
}
.filter-open {
display: block;
max-height: 300px;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<table>
<thead>
<tr>
<th>first</th>
<th>
second
<span>
<i class="context-icon fa fa-lg fa-filter">
<select multiple class="filter filter-open">
<option >option1</option>
<option >option2</option>
<option >option3</option>
</select>
</i>
</span>
</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
</table>
</body>

I have added position relative to i, and right 0px to the select :
i {
position: relative;
}
i select {
right: 0px;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:black 1px solid;
border-radius:3px;
border-collapse: collapse;
box-shadow: 0 1px 2px #d1d1d1;
}
table, th, td {
border: 1px solid black;
}
table th {
width:150px;
}
.context-icon {
float:right;
cursor:default;
color: green;
padding-right: 10px;
padding-left: 10px;
//position: absolute;
}
.filter {
visibility: hidden;
display: block;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 2px 6px;
max-height: 0px;
z-index: 1000;
height:auto;
transition: visibility 200ms, max-height 200ms ease-in-out;
//right:0;
}
.filter-open {
display: block;
max-height: 300px;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<table>
<thead>
<tr>
<th>first</th>
<th>
second
<span>
<i class="context-icon fa fa-lg fa-filter">
<select multiple class="filter filter-open">
<option >option1</option>
<option >option2</option>
<option >option3</option>
</select>
</i>
</span>
</th>
<th>third</th>
</tr>
</thead>
</table>
</body>

Please add css below:
.filter {
right: 50%;
}

How can I erase a border piece using CSS?

I'm trying to create a matrix effect using only HTML/CSS, and the way how i found is to apply a solid border and now erase some piece at top and bottom, someone knows how can I create this effect only using CSS (If it's possible) ?
There is a pic to explain better my objective:

A semantic way is to not give the actual element a border at all! You use :before and :after pseudo elements as transparent boxes on the right and left side. The pseudo elements are given transparent backgrounds and borders that don't overlap the content which creates the effect.
This works with any background: http://jsfiddle.net/kkYrP/8/
.box{
position:relative;
}
.box:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
width: 8%;
border: 2px solid #333;
border-right:none;
z-index:1;
}
.box:after{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom:-2px;
width: 8%;
border: 2px solid #333;
border-left:none;
z-index:1;
}
Note: if you're having clicking/hovering issues try adding pointer-events:none; on the :before and :after.

http://jsfiddle.net/kkYrP/5/
Give a border-left and right:
.box {
border-left:2px solid #333;
border-right:2px solid #333;
}
And add pseudo elements with negative z-index:
.box:before{
content:"";
background:#333;
position:absolute;
z-index: -1;
left:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
.box:after{
content:"";
background:#333;
position:absolute;
z-index: -1;
right:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
This adresses #David's problems and is based on #James's solution.

working example: http://jsfiddle.net/awesome/4gB43/1/
using background-image and linear-gradient:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility
CSS:
.wrapper {
display: inline-block;
padding: 2px;
background-repeat: no-repeat;
background-position: center;
background-size: 90% 100%;
background-color: black;
background-image: linear-gradient(white, white);
}
.wrapper-inner {
display: block;
background: white;
padding: 5px;
}
table td {
border-top: none !important;
}
table {
margin-bottom: 0 !important;
}
HTML:
<div class="wrapper">
<div class="wrapper-inner">
<table class="table">
<thead class="sr-only">
<tr>
<th>Whatever</th>
<th>Again, Whatever</th>
<th>Finally, Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>71571</td>
<td>26157</td>
</tr>
<tr>
<td>0</td>
<td>-497461.35798</td>
<td>-143674.72856</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>-6391.62859</td>
</tr>
</tbody>
</table>
</div>
</div>

Extending James Bruckner's response, I recently had to do something similar, but I had to do it with curly braces. Basically, you add the braces as content in :after and :before and you position absolute them. You can see the implementation in the link below.
http://jsfiddle.net/kaNG2/
Your HTML
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>
Your CSS
div {
padding:3em;
font-size:1em;
width:20em;
position:relative;
}
div:after,
div:before {
font-size:6.7em;
color:#999;
position:absolute;
top:0;
}
div:before {
content: "[";
left:0;
}
div:after {
right:0;
content:"]";
}

I would like to give a simplest alternative, using a linear-gradient on a pseudo-element.
This way doesn't use extra markup, and you won't have any mouse-event issue.
table.matrix {
position: relative;
background: white;
}
table.matrix:before {
content: ' ';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background-image: linear-gradient(to right, black 10%, white 10%, white 90%, black 90%);
}
/* Non-required stuff */
td {
padding: 3px 5px;
}
<table class="matrix">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>

You could draw the braces in elements next to the one containing the numbers. This will give you the effect you want.
CSS
span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}
HTML
<span class="Brace">
<span class ="leftBrace"> </span>
<span class =""> TEXT</span>
<span class ="rightBrace"> </span>
</span>
Example of working code here: JSFiddle

working example: http://jsfiddle.net/awesome/bA7d3/
CSS:
.table.table-custom tr:first-child td:first-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:first-child {
border-bottom: 2px solid black;
}
.table.table-custom tr:first-child td:last-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:last-child {
border-bottom: 2px solid black;
}
.table.table-custom {
border-right: 2px solid black;
border-left: 2px solid black;
}
.table.table-custom td {
border-top: none;
}

javascript not working as desired

i have a form having three fields old,new and confirm.i have designed a javascript to check if all the fields are entered or not but unfortunately this is not working as desired.please tell me where i have done mistake.i am new to javascript
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, command, details, fieldset,
figcaption, figure, footer, group, header, hgroup, legend{
margin: 0;
padding: 0;
border: 0;
}
html {
font: 82.5% verdana, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.button {
min-width: 46px;
text-align: center;
color: #444;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
border-radius: 2px;
transition: all 0.218s;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
cursor: default;
}
*+html .button {
min-width: 70px;
}
button.button,
input[type=submit].button {
height: f1f1f1px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
transition: all 0.0s;
background-color: #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.button:active {
background-color: #f6f6f6;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.button:visited {
color: #666;
}
.button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
}
.button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
button-submit:active {
background-color: #357ae8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.footer-bar {
bottom: 0;
height: 35px;
width: 100%;
overflow: hidden;
}
.content {
padding: 0 44px;
}
.table{
padding: 0 55px
}
.header {
padding: 10px 20px 5px;
background:#00AAFF;
border: 1px solid #e5e5e5;
height:20px;
}
</style>
<script type="text/javascript">
function ccheck()
{
old=document.f1.old.value;
confirm=document.f1.confirm.value;
if(old=="" || old==null)
{
alert("Plz. Enter Your City");
document.f1.old.focus();
return false;
}
if(confirm=="" || confirm==null)
{
alert("Plz. Enter Your State");
document.f1.confirm.focus();
return false;
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="">
<form action="checkPassword.jsp" onSubmit="return ccheck()">
<div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="NewPsw"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
A jsfiddle for the same http://jsfiddle.net/YCWu4/

Try using this to get your elements
old = document.getElementById('old').value;
confirm = document.getElementById('confirm').value;
And give them ids to reference instead of names:
<input id="old" name="old">
and
<input id="confirm" name="confirm">
Working DEMO

You need to name your form if you want to reference it by name using document.f1
<form name="f1" id="f1" action="checkPassword.jsp" onsubmit="return ccheck()">
working fiddle
Some other pointers:
Your inputs are not well formed. <input/>
Do not pollute the global namespace add var to old and confirm

You miss name="f1" on your form tag.