I am trying to use bootstrap to give style to my grid but it makes it cover all the page. I tried to make the div containing the table smaller but it didnt work. How can I override bootstrap style?
HTML
<!doctype html>
<html ng-app='calendar'>
<head>
<title>Calendar</title>
<link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/mystyle.css">
<script type="text/javascript" src="static/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body >
<div class='wrapper' ng-controller='GridCtrl as grid'>
<div class="week-calendar">
<table class="table table-striped table-bordered table-condensed" width="100">
<tbody>
<tr ng-repeat="row in grid.rows">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
my StyleSheet to override bootstrap
.week-calendar{
width: 400;
}
.table-striped tbody tr.active:nth-child(odd) td, .table-striped tbody tr.active:nth-child(odd) th {
background-color: black;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
