<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<form class="form-inline">
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">Subscribe</button>
</div>
</div>
</form>
<h2>Image Gallery</h2>
<div class="row col-container">
<div class="col-md-4 col">
<div class="thumbnail">
<a href="/w3images/fjords.jpg" target="_blank">
<img src="https://images.pexels.com/photos/359757/pexels-photo-359757.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Fjords" style="width:100%">
<div class="caption">
<p>Loremcx xcbxcbb xcbcbvxcbxcvb ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col">
<div class="thumbnail">
<a href="/w3images/fjords.jpg" target="_blank">
<img src="https://images.pexels.com/photos/359757/pexels-photo-359757.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus .</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col">
<div class="thumbnail">
<a href="/w3images/fjords.jpg" target="_blank">
<img src="https://images.pexels.com/photos/359757/pexels-photo-359757.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<h2>Typography</h2>
<p>Use the .lead class to make a paragraph "stand out":</p>
<p class="lead">This paragraph stands out.</p>
<p>This is a regular paragraph.</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<div class="container">
<h2>Contextual Label Classes</h2>
<p>Contextual classes can be used to color the label.</p>
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
</div>
<div class="container">
<h2>List Group With Custom Content</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
</div><div class="container">
<br>
<!-- Left-aligned media object -->
<div class="media">
<div class="media-left">
<img src="https://images.pexels.com/photos/359757/pexels-photo-359757.jpeg?h=350&auto=compress&cs=tinysrgb" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Left-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<hr>
<!-- Right-aligned media object -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">Right-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="https://images.pexels.com/photos/359757/pexels-photo-359757.jpeg?h=350&auto=compress&cs=tinysrgb" class="media-object" style="width:60px">
</div>
</div>
</div>
<div class="container">
<h2>Nested Media Objects</h2>
<p>Media objects can also be nested (a media object inside a media object):</p><br>
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar2.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 20, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar3.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 21, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar4.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane Doe <small><i>Posted on February 20, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar5.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Large Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="w3-table-all notranslate">
<tbody><tr>
<th style="width:22%;"> </th>
<th style="width:19%;">Extra small devices<br>Phones (<768px)</th>
<th style="width:20%;">Small devices<br>Tablets (>=768px)</th>
<th style="width:21%;">Medium devices<br>Desktops (>=992px)</th>
<th style="width:18%;">Large devices<br>Desktops (>=1200px)</th>
</tr>
<tr>
<td><strong>Grid behaviour</strong></td>
<td>Horizontal at all times</td>
<td>Collapsed to start, horizontal above breakpoints</td>
<td>Collapsed to start, horizontal above breakpoints</td>
<td>Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<td><strong>Container width</strong></td>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<td><strong>Class prefix</strong></td>
<td>.col-xs-</td>
<td>.col-sm-</td>
<td>.col-md-</td>
<td>.col-lg-</td>
</tr>
<tr>
<td><strong>Number of columns</strong></td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td><strong>Column width</strong></td>
<td>Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<td><strong>Gutter width</strong></td>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
</tr>
<tr>
<td><strong>Nestable</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><strong>Offsets</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><strong>Column ordering</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody></table>
</div>
<section class="table-section">
<div class="table-responsive">
<table class="table" cellspacing="0">
<thead>
<tr>
<th colspan="3">Brandon Berry</th>
<th>Total Indicated Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Indication ID</td>
<td>DOB</td>
<td>State of CDL License</td>
<td rowspan="2" class="amount">$1,050.00</td>
</tr>
<tr>
<td>IN123A1243</td>
<td>10-Jan-1988</td>
<td>Delaware</td>
</tr>
</tbody>
</table>
</div>
</section>
<!----3rd--->
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="table-box">
<div class="top-bar">
<div class="berry">
<h5>BERRY</h5>
</div>
</div>
<div class="top-bar-right">
<div class="berry">
<h5>Total Indicated Premium</h5>
</div>
</div>
<div class="indi-top-bar">
<div class="berry1">
<h5>Indication Id</h5>
<h5>IN1123A122</h5>
</div>
<div class="berry1">
<h5>Indication Id</h5>
<h5>IN1123A122</h5>
</div>
<div class="berry1">
<h5>Indication Id</h5>
<h5>IN1123A122</h5>
</div>
</div>
<div class="top-bar-right-1">
<div class="berry">
<h5 class="rupee">1,050.00 </h5>
<i class="fa fa-chevron-right right-arrow" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<!--advancedsearch-->
<div class="container">
<div class="row">
<div class="advance-search">
<form role="search" method="get" id="searchform" action="http://demo.accesspressthemes.com/storevilla/">
<div class="sv_search_wrap">
<select class="sv_search_product false" name="term">
<option value="">All Categories</option>
<optgroup class="sv-advance-search" label="All Categories">
<option value="albums">Albums</option>
<option value="electronic">Electronic</option>
<option value="hoodies">Hoodies</option>
<option value="mens-clothing">Men's Clothing</option>
<option value="music-player">Music Player</option>
<option value="posters">Posters</option>
<option value="singles">Singles</option>
<option value="t-shirts">T-shirts</option>
<option value="womens-clothing">Women's Clothing</option>
</optgroup>
</select>
</div>
<div class="sv_search_form">
<input type="text" value="" name="s" id="s" placeholder="Search entire store here">
<button type="submit" id="searchsubmit"><i class="fa fa-search"></i></button>
<input type="hidden" name="post_type" value="product">
<input type="hidden" name="taxonomy" value="product_cat">
</div>
</form>
</div>
</div>
</div>
<!---my-table--->
<div class="container">
<div class="row">
<div class="col-lg-6">
<table class="table" cellspacing="0">
<thead>
<tr>
<th colspan="3" class="heading">BRANDON BERRY</th>
<th class="total-indicate">Total Indicated Premium</th>
</tr>
</thead>
<tbody class="combain">
<tr>
<td>
Indication ID
</td>
<td>DOB</td>
<td>State of CDL License</td>
<td rowspan="2" class="amount">$1,050.00</td>
</tr>
<tr>
<td>
IN123A1243
</td>
<td>10-Jan-1988</td>
<td>Delaware</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.table-section .table {
border:solid 2px #f3f2f2;
border-spacing:0;
overflow: hidden;
margin-bottom: 10px;
}
.table-section .table>tbody>tr>td,
.table-section .table>tbody>tr>th,
.table-section .table>tfoot>tr>td {
border:none;
}
.table-section .table>thead>tr>th {
white-space: nowrap;
font-size: 11px;
border:solid 1px #f3f2f2;
padding: 8px 15px;
}
.table-section .table>thead>tr>th:first-child {
color:#ed1c24;
font-weight: bold;
text-transform: uppercase;
border-right:none;
}
.table-section .table>thead>tr>th:nth-child(2){
background-color:#666;
color:#fff;
font-size: 12px;
font-weight: normal;
text-align: center;
border-bottom: none;
border-left: 1px #666;
}
.table-section .table>tbody>tr>td {
padding: 3px 15px;
position: relative;
}
.table-section .table>tbody>tr:nth-child(odd) {
font-size: 12px;
}
.table-section .table>tbody>tr:nth-child(odd) td{
font-size: 12px;
color:rgba(0,0,0,0.6);
}
.table-section .table>tbody>tr:nth-child(even) td{
padding: 0 15px 3px;
font-size: 15px;
color:#000;
}
.table-section .table .amount{
text-align: center;
background-color: #000;
vertical-align: middle;
font-size: 18px !important;
color:#fff !important;
padding-left: 6px;
}
.table-section .table>tbody>tr:nth-child(odd) td::after {
content: "";
background-image: url(../imgs/border.png);
background-repeat: repeat-y;
background-repeat-x: no-repeat;
background-size: cover;
height: 28px;
background-position-x: 0;
background-position-y: 0;
display: inline-block;
width: 1px;
position: absolute;
top: 8px;
right: -1px;
}
.table-section .table>tbody>tr:nth-child(odd) td:nth-child(4)::after,
.table-section .table>tbody>tr:nth-child(odd) td:nth-child(3)::after {
background-image: none;
}
.table-section .table>tbody>tr:nth-child(odd) td:nth-child(4)::before {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #ed1c24;
height: 100%;
display: inline-block;
padding: 9px 5px;
top: 0;
right: 0;
position: absolute;
}
/*--*/
.table-box{
width: 100%;
border:solid 1px #000;
min-height: 20px;
display: table;
}
.top-bar{
width: 70%;
min-height: 20px;
display: table;
border-bottom: solid 1px #000;
float: left;
}
.top-bar-right {
width: 30%;
height: 36px;
border-bottom: solid 1px #000;
float: left;
background-color: #545353;
color: #fff;
}
.berry1{
width: 33.3%;
float: left;
}
.berry1:nth-child(1),.berry1:nth-child(2) {
border-right: dotted 1px #000;
}
.indi-top-bar{
width: 70%;
min-height: 20px;
display: table;
float: left;
}
.top-bar-right-1{
width: 30%;
height: 60px;
border-bottom: solid 1px #000;
float: left;
background-color: #000;
color: #fff;
}
.rupee{
float: left;
}
.right-arrow {
float: right;
background-color: #931313;
width: 20px;
height: 61px;
}
.fa-chevron-right:before {
content: "\f054";
font-size: 27px;
position: relative;
top: 12px;
}
.berry h5,.berry1 h5{
margin-left: 10px;
}
@media screen and (max-width: 580px) {
.berry h5,.berry1{
font-size: 10px;
}
}
/*advancsd search*/
.advance-search {
border: 1px solid #cbcbcb;
}
.sv_search_wrap{
display: inline-block;
position: relative;
vertical-align: middle;
}
.advance-search .sv_search_product {
-moz-appearance: none;
/* -webkit-appearance: none; */
appearance: none;
border: none;
width: 120px;
height: 45px;
font-size: 13px;
font-family: Open Sans;
padding: 0 20px 0 15px;
color: #8e8e8e;
margin-right: 3px;
cursor: pointer;
outline: none;
box-shadow: none;
background: url(assets/images/arrow.png) no-repeat;
background-size: 10px;
background-position: 96% 53%;
}
.advance-search .sv_search_product .sv-advance-search{
border: none;
}
.sv-advance-search option{
border: none;
box-shadow: none;
padding: 4px 10px;
width: 170px;
}
.advance-search .sv_search_form, .normal-search {
position: relative;
}
.advance-search , .header-wrap , .advance-search .sv_search_form{
display: inline-block;
position: relative;
vertical-align: middle;
}
.advance-search .sv_search_form:before {
border-left: 1px solid #cbcbcb;
content: '';
position: absolute;
left: 0;
height: 30px;
top: 7px;
}
.advance-search .sv_search_form input[type=text] {
border: 0;
}
.advance-search .sv_search_form input[type=text], .normal-search .search-form .search-field {
width: 313px;
height: 45px;
padding: 0 10px;
border-radius: 0;
border: 1px solid #ccc;
color: #8e8e8e;
font-style: normal;
font-size: 13px;
}
.advance-search .sv_search_form #searchsubmit {
background: #0091D5;
border: medium none;
border-radius: 0;
box-shadow: none;
font-size: 14px;
height: 41px;
position: absolute;
right: 2px;
text-shadow: none;
top: 2px;
width: 46px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
padding: 10px;
}
.advance-search .sv_search_form #searchsubmit .fa {
color: #fff;
}
.fa-search:before {
content: "\f002";
}
/*mytable*/
body {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
color:#000;
}
.table{
border: solid 1px #f3f2f2;
}
.total-indicate{
background-color: #666;
color: #fff;
}
.heading{
border-bottom: solid 1px #f3f2f2 !important;
}
.table>thead>tr>th{
border: none;
}
tbody.combain>tr>td{
border: none;
padding: 0px;
}
tbody.combain>tr>td{
border: none;
}
tbody.combain>tr:nth-child(1) td {
padding: 4px 4px 0px 13px;
font-size: 12px;
color: rgba(0,0,0,0.6);
}
tbody.combain>tr:nth-child(2) td {
padding: 0 13px 2px;
font-size: 15px;
color: #000;
}
tbody.combain>tr>td:nth-child(1),tbody.combain>tr>td:nth-child(2) {
border-right: dotted 1px #000;
}
.amount{
text-align: center;
background-color: #000;
vertical-align: middle;
font-size: 18px !important;
color: #fff !important;
padding-left: 6px;
}
.amount::after{
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #ed1c24;
height: 100%;
display: inline-block;
padding: 8px 5px;
position: relative;
float: right;
}
