"table_views"
Bootstrap 4.1.1 Snippet by ravindra93

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="progress_inner inner_sec">
<div class="achiev_heading">
<h2>Subject : Math</h2>
</div>
<div class="grade_scale">
<table>
<thead>
<tr>
<th>Parameters</th>
<th>FA1</th>
<th>FA2</th>
<th>SA1</th>
<th>FA3</th>
<th>FA4</th>
<th>SA2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic Math</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>Conceptual understanding</td>
<td>4</td>
<td>5</td>
<td>4</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
.progress_inner {width: 1070px;margin: 0 auto;border: 5px double;}
.achiev_heading h2 {text-align: center;margin: 0;text-decoration: underline;text-underline-position: under;padding: 5px 0px;}
.achiev_heading {background: #a59b9b;padding: 8px;}
.grade_scale, .exam_names, .sujects_names {margin: 20px 0px;padding: 0px 7px;}
.grade_scale table, .grade_scale th, .grade_scale td, .exam_names table, .exam_names th, .exam_names td, .sujects_names table, .sujects_names th, .sujects_names td { border: 1px solid #000;border-collapse: collapse;padding: 5px;font-size: 17px;}
.grade_scale table, .exam_names table, .sujects_names table {width: 100%;}
.sujects_names td, .exam_names td {text-align: center;}
.inner_sec .grade_scale td:nth-child(1), .inner_sec .sujects_names td:nth-child(1), .inner_sec .exam_names td:nth-child(1){text-align: left;}
.inner_sec .grade_scale td{text-align: center}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: