Glyphicon issue on alternating row disapears - html

Question

I am trying to create a table which binds its data via Angular. I am tasked with adding a pencil glyphicon to each row to show that the row is editable. The problem I am running into is if I use the bootstrap table-striped class and add the glyphicon glyphicon-pencil class it seems like the row is sitting behind the glyphicon the problem with this is the entire row is clickable but the glyphicon. If I add a style="z-index:-1" the pencil only shows up on the white rows and not the gray ones? I have fought and tried just bout everything I can think of and I cannot seem to get the glyphicon to show on the alternating rows using the z-index which does make the glyphicon clickable. Everything in the row above needs to be clickable. ( I need to be able to click on the pencil and or the grid and have it pass to the next view. )
Can someone help explain how I might be able to make this work correctly? Explain what might be happening? I am totally at a loss at this point.
here is my html code
<div ng-controller="TestCtrl">
<div class="container" ng-hide="editing" style="margin-top:25px;">
<div class="row">
<div id="no-more-tables">
<table ng-show="test.length > 0" class="col-sm-10 col-sm-offset-1 table-bordered table-striped table-condensed cf">
<thead style="text-align:left">
<tr>
<th style="width: 27px;"></th>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
<th>Field 5</th>
<th>Field 6</th>
</tr>
</thead>
<tbody>
<tr id="{{test.guidfield}}" ng-repeat="testing in test" ng-click="edit($event)" style="cursor:pointer">
<td><div class="glyphicon glyphicon-pencil" style="z-index:-1"></div></td>
<td data-title="Field 1"> {{test.field1}}</td>
<td data-title="Field 2">{{test.field2}}</td>
<td data-title="Field 3">{{test.field3}}</td>
<td data-title="Field 4">{{test.field4}}</td>
<td data-title="Field 5">{{test.field5}}</td>
<td data-title="Field 6">{{test.field16}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
here is the css I have
/* ------- this media query makes tables display vertically on devices 768px or less ------ */
/* Force table to not be like tables anymore */
#no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th,
#no-more-tables td, #no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
border: 1px solid #ccc;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 60%;
white-space: normal;
text-align: right;
height: 30px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/* Label the data */
#no-more-tables td:before {
content: attr(data-title);
}
.table-bordered {
border: none;
}

Answer 1

Use this:
<td><i class="glyphicon glyphicon-pencil" style="z-index:1"></i></td>

Answer 2

I did discover that there is something in the ng-click causing this to not work. Thank you all for the help :)