bootstrap tables

1<thead>
2  <tr>
3    <th rowspan="2">State</th>
4    <th rowspan="2">Utilities Company</th>
5    <th colspan="3">Summer Period</th>
6  </tr>
7  <tr>
8    <th>data1</th>
9    <th>data2</th>
10    <th>data3</th>
11  </tr>
12</thead>

1<table class="table table-striped table-dark">
2  <thead>
3    <tr>
4      <th scope="col">#</th>
5      <th scope="col">First</th>
6      <th scope="col">Last</th>
7      <th scope="col">Handle</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <th scope="row">1</th>
13      <td>Mark</td>
14      <td>Otto</td>
15      <td>@mdo</td>
16    </tr>
17    <tr>
18      <th scope="row">2</th>
19      <td>Jacob</td>
20      <td>Thornton</td>
21      <td>@fat</td>
22    </tr>
23    <tr>
24      <th scope="row">3</th>
25      <td>Larry</td>
26      <td>the Bird</td>
27      <td>@twitter</td>
28    </tr>
29  </tbody>
30</table>

1<table class="table table-sm">
2  ...
3</table>

1
2//html
3<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
4<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
5<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
6<!------ Include the above in your HEAD tag ---------->
7
8<div class="container">
9    <div class="row clearfix">
10		<div class="col-md-12 column">
11			<table class="table table-bordered table-hover" id="tab_logic">
12				<thead>
13					<tr>
14						<th class="text-center">"#"</th>
15						<th class="text-center">Name</th>
16						<th class="text-center">Mail</th>
17						<th class="text-center">Mobile</th>
18					</tr>
19				</thead>
20				<tbody>
21					<tr id='addr0'>
22						<td>1</td>
23						<td>
24						<input type="text" name='name[]'  placeholder='Enter Full Name' class="form-control"/>
25						</td>
26						<td>
27						<input type="email" name='mail[]' placeholder='Enter Mail' class="form-control"/>
28						</td>
29						<td>
30						<input type="number" name='mobile[]' placeholder='Enter Mobile' class="form-control"/>
31						</td>
32					</tr>
33                    <tr id='addr1'></tr>
34				</tbody>
35			</table>
36		</div>
37	</div>
38	<button id="add_row" class="btn btn-default pull-left">Add Row</button>
39	<button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
40</div>
41
42//js
43$(document).ready(function(){
44      var i=1;
45     $("#add_row").click(function(){b=i-1;
46      $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
47      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
48      i++; 
49  });
50     $("#delete_row").click(function(){
51    	 if(i>1){
52		 $("#addr"+(i-1)).html('');
53		 i--;
54		 }
55	 });
56});

1<table class="table">
2  <thead>
3    <tr>
4      <th scope="col">#</th>
5      <th scope="col">First</th>
6      <th scope="col">Last</th>
7      <th scope="col">Handle</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <th scope="row">1</th>
13      <td colspan="3>Mark</td>
14      <td>@mdo</td>
15    </tr>
16    <tr>
17      <th scope="row">2</th>
18      <td colspan="3>Jacob</td>
19      <td>@fat</td>
20    </tr>
21    <tr>
22      <th scope="row">3</th>
23      <td colspan="3">Larry the Bird</td>
24      <td>@twitter</td>
25    </tr>
26  </tbody>
27</table>

1Due to the widespread use of tables across third-party widgets like 
2calendars and date pickers, we’ve designed our tables to be opt-in. 
3Just add the base class .table to any <table>, then extend with custom 
4styles or our various included modifier classes.
5
6Using the most basic table markup, here’s how .table-based tables 
7look in Bootstrap. All table styles are inherited in Bootstrap 4,
8meaning any nested tables will be styled in the same manner as the parent.
9
10<table class="table table-dark">
11  <thead>
12    <tr>
13      <th scope="col">#</th>
14      <th scope="col">First</th>
15      <th scope="col">Last</th>
16      <th scope="col">Handle</th>
17    </tr>
18  </thead>
19  <tbody>
20    <tr>
21      <th scope="row">1</th>
22      <td>Mark</td>
23      <td>Otto</td>
24      <td>@mdo</td>
25    </tr>
26    <tr>
27      <th scope="row">2</th>
28      <td>Jacob</td>
29      <td>Thornton</td>
30      <td>@fat</td>
31    </tr>
32    <tr>
33      <th scope="row">3</th>
34      <td>Larry</td>
35      <td>the Bird</td>
36      <td>@twitter</td>
37    </tr>
38  </tbody>
39</table>