We Keep Coding

How to delay the search in list.js?

I'm using list.js for filtering and searching, my list is very large and I need to delay the search for it, but the documentation doesn't show any examples of how to do so, all it says is this: https://listjs.com/api/#searchDelay
One example of how to do so would be very helpful

Below is the table example from List.js which I have used in this snippet to demonstrate the usage of searchDelay. Below snippet code sets a delay of 1 second before starting a search on the list. As per the changelog, this feature has been included with version 2.3.0
var options = {
valueNames: [ 'name', 'born' ],
searchDelay: 1000 // 1 second
};
var userList = new List('users', options);
.list {
font-family:sans-serif;
}
td {
padding:10px;
border:solid 1px #eee;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

Wrong position of OnClick Dropdown Menu

Hello, this is the link before click. And when I click on that link, that link go to upper side of the page, like this;
You can see the difference. I am also attaching the code please check.
Here is what I am working on;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.dropdown-content {
display: none;
position: relative;
width: 200px;
background-color: #FFF;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #000;
text-decoration: none;
display: block;
padding: 5px 10px;
font-size: 13px;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {display: block;}
<div class="header">
<table border="0" width="100%">
<tr>
<td width="5%" valign="top"><img src="./images/logo_small.png" alt="" title=""></td>
<td width="45%"><div class="web_title">ASHNAB</div></td>
<td width="50%" align="right">
<div class="header_links">
Link Drop Down
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</td>
</tr>
</table>
</div>
I don't know where the issue lies.
Please help

It seems like a small thing, but there you go. Change only the CSS:
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 2rem;
width: 200px;
background-color: #FFF;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
The absolute positioning takes the element out of the normal flow. That's about it.

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!

loop through each input and loop again and compare

As you can see from the below snippet, I first get the current parent row (".role_td_holder") of the currently click button and find divs that has a class of ".role_wrapper" within it and then put it on a variable named "this_roletr" and then I loop through each .flatRoundedCheckbox input, created a global variable named "role_name" and then loop through each divs that has a class of "role_wrapper" and then get each text and put it on the global variable "role_name" and then within the loop of ".flatRoundedCheckbox input" I compare if the current looped input's name attribute content is equal to the role_name content, if it does then put checked property to this currently looped input else if it doesn't then set the checked property to false. As below snippets, it works but only one checkbox is checked when theres actually two .role_wrapper or multiple that matched its text to any of the .flatRoundedCheckbox input name (e.g. if theres two divs that has a class of "role_wrapper, only one checkbox is checked when supposedly, two checkbox must be checked that matched its name attribute content to those divs that has a class of "role_wrapper" text. Any help, ideas, suggestion, recommendation, help is greatly appreciated. Thank you!
$(document).ready(function(){
$(document).on("click", ".trigger", function(){
var this_roletr = $(this).parents(".role_td_holder").find(".role_wrapper");
$("#checkbox_container .flatRoundedCheckbox input[type='checkbox']").each(function(){
var checkbox = $(this);
this_roletr.each(function(){
var role_name = $(this).text();
if(checkbox.attr("name") === role_name){
checkbox.prop("checked", true);
}else{
checkbox.prop("checked", false);
}
});
});
});
});
table, theader, th, tbody, tr, td, a, .extend{max-width: 100%;max-height: 100%;}
a:focus, a:active{outline: none;text-decoration: none;}
a, span, .cosbox_notify, .transation{-webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;}
.bgwhite{background: #fff;}
.center{margin-left: auto;margin-right: auto;}
.clear{clear: both;float: none;}
.fade {transition: all 300ms linear 700ms;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;}
.fade.out {opacity: 0;}
.table_scroll, .overflow_container{overflow: auto;}
.table_scroll_y{overflow-x: hidden; overflow-y: auto;}
.table_scroll_x{overflow-x: auto; overflow-y: hidden;}
.align_left{float: left;}
.align_right{float: right;}
.display_table{display: table;}
.display_block{display: block;}
.overflow_hidden{overflow: hidden;}
.overflow_auto{overflow: auto};
.overflow_x{overflow-x: auto};
.overflow_y{overflow-y: auto};
.inline_block{display: inline-block;}
.divider{height: 10px;}
.padding_2px{padding: 2px;}
.padding_3px{padding: 3px;}
.padding_4px{padding: 4px;}
.padding_5px{padding: 5px;}
.padding_6px{padding: 6px;}
.padding_7px{padding: 7px;}
.padding_8px{padding: 8px;}
.padding_9px{padding: 9px;}
.padding_10px{padding: 10px;}
.margin_left2px{margin-left: 2px;}
.margin_left3px{margin-left: 3px;}
.margin_left4px{margin-left: 4px;}
.margin_left5px{margin-left: 5px;}
.margin_left6px{margin-left: 6px;}
.margin_left7px{margin-left: 7px;}
.margin_left8px{margin-left: 8px;}
.margin_left9px{margin-left: 9px;}
.margin_left10px{margin-left: 10px;}
.margin_right2px{margin-right: 2px;}
.margin_right3px{margin-right: 3px;}
.margin_right4px{margin-right: 4px;}
.margin_right5px{margin-right: 5px;}
.margin_right6px{margin-right: 6px;}
.margin_right7px{margin-right: 7px;}
.margin_right8px{margin-right: 8px;}
.margin_right9px{margin-right: 9px;}
.margin_right10px{margin-right: 10px;}
.margin_top2px{margin-top: 2px;}
.margin_top3px{margin-top: 3px;}
.margin_top4px{margin-top: 4px;}
.margin_top5px{margin-top: 5px;}
.margin_top6px{margin-top: 6px;}
.margin_top7px{margin-top: 7px;}
.margin_top8px{margin-top: 8px;}
.margin_top9px{margin-top: 9px;}
.margin_top10px{margin-top: 10px;}
.margin_bottom2px{margin-bottom: 2px;}
.margin_bottom3px{margin-bottom: 3px;}
.margin_bottom4px{margin-bottom: 4px;}
.margin_bottom5px{margin-bottom: 5px;}
.margin_bottom6px{margin-bottom: 6px;}
.margin_bottom7px{margin-bottom: 7px;}
.margin_bottom8px{margin-bottom: 8px;}
.margin_bottom9px{margin-bottom: 9px;}
.margin_bottom10px{margin-bottom: 10px;}
.status_approve{color: #76b729 !important;}
.status_reject{color: #eb5959 !important;}
.status_pending{color: #ebca59 !important;}
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
.green_button:focus, .green_button:active{outline: none;}
.flatRoundedCheckbox
{
width: 40px;
height: 21px;
position: relative;
}
.flatRoundedCheckbox div
{
width: 100%;
height:100%;
background: #d3d3d3;
border-radius: 50px;
position: relative;
}
.flatRoundedCheckbox label
{
display: block;
width: 16px;
height: 16px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 2px;
z-index: 1;
left: 3px;
background: #FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 1px rgba(0,0,0,0.3);
box-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
.flatRoundedCheckbox input[type="checkbox"]{
display: none;
}
.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
background: #4fbe79;
}
.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
left: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead><th>Full name</th><th>role</th><th>Option</th></thead>
<tbody>
<tr class="role_td_holder">
<td>Full name 1</td>
<td>
<div class="display_table center role_wrapper_container">
<button class="draggable extend role_wrapper">Role 1</button>
</div>
<div class="display_table center role_wrapper_container">
<button class="draggable extend role_wrapper">Role 2</button>
</div>
</td>
<td>
<button class="trigger">Click</button>
</td>
</tr>
<tr class="role_td_holder">
<td>Full name 1</td>
<td>
<div class="display_table center role_wrapper_container">
<button class="draggable extend role_wrapper">Role 1</button>
</div>
</td>
<td>
<button class="trigger">Click</button>
</td>
</tr>
<tr class="role_td_holder">
<td>Full name 1</td>
<td>
<div class="display_table center role_wrapper_container">
<button class="draggable extend role_wrapper">Role 1</button>
</div>
<div class="display_table center role_wrapper_container">
<button class="draggable extend role_wrapper">Role 2</button>
</div>
</td>
<td>
<button class="trigger">Click</button>
</td>
</tr>
</table>
<div class="extend clear padding_7px overflow_auto" id="checkbox_container">
<div class="display_table align_left margin_right3px margin_bottom3px">
<div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 1</div>
<div class="flatRoundedCheckbox align_left">
<input type="checkbox" value="5" name="Role 1">
<label></label>
<div></div>
</div>
</div>
<div class="display_table align_left margin_right3px margin_bottom3px">
<div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 2</div>
<div class="flatRoundedCheckbox align_left">
<input type="checkbox" value="6" name="Role 2">
<label></label>
<div></div>
</div>
</div>
<div class="display_table align_left margin_right3px margin_bottom3px">
<div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 3</div>
<div class="flatRoundedCheckbox align_left">
<input type="checkbox" value="7" name="Role 3">
<label></label>
<div></div>
</div>
</div>
</div>

try this
$(this).parents(".role_td_holder").find(".role_wrapper").each(function(){
var role_name = $.trim($(this).text());
$("#checkbox_container .flatRoundedCheckbox input[type='checkbox']").each(function(){
if($(this).attr("name") === role_name){
$(this).prop("checked", true);
}
// alert("asdasd");
});
});

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