Skip to content

Instantly share code, notes, and snippets.

@karkranikhil

karkranikhil/table_with_colspan

Last active August 29, 2015 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karkranikhil/b50e85a183b0702bbc24 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karkranikhil/b50e85a183b0702bbc24 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
table_with_colspan
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="table-responsive">
<table class="table table-bordered" border="1" width="100%">
<tr>
<td colspan="4" rowspan="2" style="width: 98px;">a</td>
<td colspan="5">b</td>
<td colspan="4">b</td>
</tr>
<tr>
<td colspan="1">c</td>
<td colspan="1">d</td>
<td colspan="1">e</td>
<td colspan="1">f</td>
<td colspan="1">gwerrwerwerwerwe</td>
<td colspan="1">h1</td>
<td colspan="1">h2</td>
<td colspan="1">h3</td>
<td colspan="1">h4</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h5 class="panel-title"></h5>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-12">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
with div
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<style>
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<div class="row" style="margin-bottom: 0px;">
<div class="col-md-4" style="padding-bottom: 0px;height:99px;">.col-md-4</div>
<div class="col-md-4" style="padding-bottom: 0px;">col-md-8
<div class="row">
<div class="col-md-3">.col-md-6</div>
<div class="col-md-3">.col-md-6</div>
<div class="col-md-3">.col-md-6</div>
<div class="col-md-3">.col-md-6</div>
</div>
</div>
<div class="col-md-4" style="padding-bottom: 0px;">.col-md-8
<div class="row">
<div class="col-md-3">.col-md-6</div>
<div class="col-md-3">.col-md-6</div>
<div class="col-md-2">.col</div>
<div class="col-md-2">.col</div>
<div class="col-md-2">.col</div>
</div>
</div>
</div>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">nikhil</td>
<td>Anna</td>
<td>nikhil</td>
<td>Anna</td>
<td>nikhil</td>
<td>Anna</td>
<td>nikhil</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment