<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> <td>5</td> <td>4</td> <td>5</td> </tr> </tbody> </table> </div> <div class="achiev_heading txtupper"> <h2>Subject : Science/Physics/Chemistry/Biology</h2> </div> <div class="sujects_names"> <table> <thead> <tr> <th rowspan="3">Parameters</th> <th colspan="3">FA1</th> <th colspan="3">FA2</th> <th colspan="3">SA1</th> <th colspan="3">FA3</th> <th colspan="3">FA4</th> <th colspan="3">SA2</th> </tr> <tr> <th colspan="3">Science</th> <th colspan="3">Science</th> <th colspan="3">Science</th> <th colspan="3">Science</th> <th colspan="3">Science</th> <th colspan="3">Science</th> </tr> <tr> <th>P</th> <th>C</th> <th>B</th> <th>P</th> <th>C</th> <th>B</th> <th>P</th> <th>C</th> <th>B</th> <th>P</th> <th>C</th> <th>B</th> <th>P</th> <th>C</th> <th>B</th> <th>P</th> <th>C</th> <th>B</th> </tr> </thead> <tbody> <tr> <td>Listening and Reading</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> </tr> <tr> <td>Speaking skill and Vocabulary</td> <td>8</td> <td>5</td> <td>9</td> <td>5</td> <td>8</td> <td>7</td> <td>4</td> <td>5</td> <td>6</td> <td>3</td> <td>10</td> <td>6</td> <td>8</td> <td>3</td> <td>8</td> <td>4</td> <td>7</td> <td>6</td> </tr> <tr> <td>Creative work/Creative problem solving</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> <td>4</td> <td>7</td> <td>6</td> </tr> </tbody> </table> </div> <div class="achiev_heading"> <h2>Subject : Social Studies</h2> </div> <div class="exam_names"> <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>Conceptual understanding</td> <td>7</td> <td>5</td> <td>7</td> <td>8</td> <td>8</td> <td>4</td> </tr> <tr> <td>Fundamental understanding of ethical/legal issues related to topics</td> <td>7</td> <td>5</td> <td>7</td> <td>8</td> <td>8</td> <td>4</td> </tr> <tr> <td>Understanding Interconnections between various systems/Countrues</td> <td>7</td> <td>5</td> <td>7</td> <td>8</td> <td>8</td> <td>4</td> </tr> </tbody> </table> </div> </div>

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