https://i.sstatic.net/9uKBt.png
<div class="container" ng-app="sortApp" ng-controller="mainController">
<form>
<div class="form-group">
<div class="input-group">
<div style="color:white;background-color:#f78800;border-color:#f78800;" class="input-group-addon"><i class="fa fa-search"></i></div>
<input style="width:855px;"type="text" class="form-control" placeholder="Search..." ng-model="searchFish">
</div>
</div>
</form>
<table class="table table-bordered table-striped" id="hotkey">
<thead>
<tr>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">KEY</a>
</td>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">ON FOOT</a>
</td>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">ON VEHICLE</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.tastiness }}</td>
</tr>
</tbody>
</table>
</div>
#hotkey {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 900px;
}
#hotkey td, #hotkey th {
border: 2px solid #f78800;
padding: 8px;
}
#hotkey td {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
color: #fff;
}
So, I noticed that every odd line has a white background. How can I change this background to transparent? For example, rows 1 and 3 have a white background. I have tried adding background-color to any style, but it doesn't seem to work. The odd lines all have a white background here. I would like to change it to transparent.
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchFish = ''; // set the default search/filter term
// create the list of sushi rolls
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
{ name: 'Philly', fish: 'Tuna', tastiness: 4 },
{ name: 'Tiger', fish: 'Eel', tastiness: 7 },
{ name: 'Rainbow', fish: 'Variety', tastiness: 6 }
];
});
#hotkey {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 900px;
}
#hotkey td, #hotkey th {
border: 2px solid #f78800;
padding: 8px;
}
#hotkey td {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<form>
<div class="form-group">
<div class="input-group">
<div style="color:white;background-color:#f78800;border-color:#f78800;" class="input-group-addon"><i
class="fa fa-search"></i></div>
<input style="width:855px;"type="text" class="form-control" placeholder="Search..."
ng-model="searchFish">
</div>
</div>
</form>
<table class="table table-bordered table-striped" id="hotkey">
<thead>
<tr>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">KEY</a>
</td>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">ON FOOT</a>
</td>
<td>
<a style="color:#f78800;font-weight:bold;font-size:15px;">ON VEHICLE</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.tastiness }}</td>
</tr>
</tbody>
</table>
</div>