I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!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">
<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">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>
You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!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">
<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">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview
Related
I have a bootstrap table with overflow scroll (.table-responsive). Its working fine but i want to remove scroller from bottom. how can i remove it?
<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" style="width:1500px;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
</script>
</body>
</html>
Is it because your table is wider than it's container. Either you remove the inline style with 1500px or give overflow-x: hidden; to the container which will disable the horizontal scrolling, but your table's width will be the same and a big part of it will be invisible
If you want to keep the horizontal scrolling, but want to hide the scrollbar, then you should try this:
div::-webkit-scrollbar{
display: none;
}
NOTE: it works only in webkit based browsers
Though i have div class "dl-horizontal" inside the table, the dl-horizontal fields appear to be outside the table
Code which i used:
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span></caption>
<dl class="dl-horizontal">
<dt>field-1</dt><dd>14</dd>
<dt>field-2</dt><dd>13</dd>
<dt>field-3</dt><dd>12</dd>
</dl>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>
What am i missing in this? I am trying to get "dl-horizontal" fields inside EVENT and above table values. any help is greatly appreciated. i tried table inside a the table but that doesnt seem to work.
This it the correct approach:
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span></caption>
<tr><td colspan="6">
<dl class="dl-horizontal">
<dt>field-1</dt><dd>14</dd>
<dt>field-2</dt><dd>13</dd>
<dt>field-3</dt><dd>12</dd>
</dl>
</td></tr>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>
I think that you need to place your description list with a table element for it to be included as part of the table. This snippet places it within the caption 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span>
<dl class="dl-horizontal">
<dt>field-1</dt>
<dd>14</dd>
<dt>field-2</dt>
<dd>13</dd>
<dt>field-3</dt>
<dd>12</dd>
</dl>
</caption>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
<hr>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span>
</caption>
<tr>
<td colspan="6">
<dl class="dl-horizontal">
<dt>field-1</dt>
<dd>14</dd>
<dt>field-2</dt>
<dd>13</dd>
<dt>field-3</dt>
<dd>12</dd>
</dl>
</td>
</tr>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>
Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.
Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>
You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
I want to have a little not standard table. This is how it should look:
This is my demo. As you can see there, width of the first column is increased by text, but I don't want this behaviour. I want text to go from left to right in full row.
UPDATE:
For those who want to close question. Read below please.
I can't use additional tr and td with colspan for note. I use angular2 and datatables.net for tables and it will break selection and getting selected data.
use colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td colspan="3"><div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
since you don't want to use extra tr you may can use this method using css
.tr-holder>td {
padding-bottom: 35px !important;
}
.full-width {
position: absolute;
left: 0;
width: 100%;
padding: 0 9px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="tr-holder"> <!-- class added -->
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div class="full-width"> <!-- class added -->
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could also add an inline CSS
<td style="max-width:50px;">Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
specify the width of your table.
add this css properties to your style sheet.it will work fine
table
{
table-layout: fixed;
width: 100px;
}
I'm added the snippet below.
table
{
table-layout: fixed;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
or you can apply style to your td div,as
td div { width: 100px; overflow: hidden; }
td div { width: 100px; overflow: hidden; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could use something like bootstrap or foundations to simulate a table structure
I am using bootstrap3 for my table.
I need Login button in to be last column of the table.
I really need it to be in bootstrap only.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td rowspan='3'><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried but couldn't solve it.
Please help me.
<!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">
<style>
.table > tbody > tr > td {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Might be you want this. If it is not, please elaborate where you exactly want the button.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td><button class="btn btn-primary">Login</button> </td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
<td><td>
</tr>
</tbody>
</table>
</div>
try this code
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>