how to make responsive table in mobile view - html

I am stuck in a simple problem , am not able to view my table responsive in mobile view
can anyone tell me how can I make it responsive in mobile view, please tell me, if you have any question related my problem please free fell to ask
tabel.html
This is my table where I want to make responsive i am using bootstrap framework for making a table.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>about Web</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="background-color: #cadefc !important; color:#798777;">
<div class="container">
<a class="navbar-brand" href="index.html">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="border: none;">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="index.html">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="price.html">Price</a>
</li>
<li class="nav-item">
<a class="nav-link" href="team.html">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- Price section Start -->
<section class="price mb-5" style="margin-top: 100px;" style=" overflow-x: scroll-bar; height:200px;">
<div class="container table-responsive" >
<table class="table table-bordered" style="width: 100%;">
<thead class="thead-light">
<tr>
<th scope="col">Package</th>
<th scope="col">Static</th>
<th scope="col">Intermediate</th>
<th scope="col">Dynamic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row ">Price</th>
<td style="background-color: lightskyblue;"><i class="fas fa-rupee-sign"></i> </td>
<td style="background-color: lightgreen;"><i class="fas fa-rupee-sign"></i> </td>
<td style="background-color: lightcoral;"><i class="fas fa-rupee-sign"></i> </td>
</tr>
<tr>
<th scope="row">No of Pages</th>
<td>4</td>
<td>6</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Mobile Tablet Friendly</th>
<td><i class="far fa-check"></i></td>
<td><i class="far fa-check"></i></td>
<td><i class="far fa-check"></i></td>
</tr>
<tr>
<th scope="row">Inquiry Page</th>
<td>-</td>
<td><i class="far fa-check"></i></td>
<td><i class="far fa-check"></i></td>
</tr>
<tr>
<th scope="row">Design Quality</th>
<td style="color: gray;">Basic</td>
<td style="color: gray;">Intermediate</td>
<td style="color: gray;">Creative</td>
</tr>
<tr>
<th scope="row">Social Media Link Integration</th>
<td>-</td>
<td>-</td>
<td><i class="far fa-check"></i></td>
</tr>
<tr>
<th scope="row">Whatsapp Integration</th>
<td>-</td>
<td>-</td>
<td><i class="far fa-check"></i></td>
</tr>
<tr>
<th scope="row">Extra pages</th>
<td style="color: gray;">Rs 200 for Each page</td>
<td style="color: gray;">Rs 300 for Each page</td>
<td style="color: gray;">-</td>
</tr>
<tr>
<th scope="row">Time Period</th>
<td style="color: gray;">4 days</td>
<td style="color: gray;">7 days</td>
<td style="color: gray;">negotiation</td>
</tr>
<tr>
<th scope="row"></th>
<td><a href="https://ashish-45.github.io/static-serviceWebsite/#"><button
class="btn btn-primary">View Sample</button></a></td>
<td><a href="https://ashish-45.github.io/SimpleDynamic/"><button class="btn btn-success">View
Sample</button></a></td>
<td><a href="https://ashish-45.github.io/static-serviceWebsite/#"><button
class="btn btn-danger">View Sample</button></a></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- price section end -->
<!-- end -->
<!-- footer start -->
<div class="footer bg-dark">
<p class="text-center text-white mb-3 p-3">© 2021 abc solution All rights reserved.</p>
</div>
<!-- footer end -->
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
</body>
</html>


https://codepen.io/geoffyuen/pen/FCBEg
.rwd-table {
margin: 1em 0;
min-width: 300px;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
padding-top: .5em;
}
.rwd-table td:last-child {
padding-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block;
}
#media (min-width: 480px) {
.rwd-table td:before {
display: none;
}
}
.rwd-table th, .rwd-table td {
text-align: left;
}
#media (min-width: 480px) {
.rwd-table th, .rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child, .rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child, .rwd-table td:last-child {
padding-right: 0;
}
}
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #46637f;
}
.rwd-table th, .rwd-table td {
margin: .5em 1em;
}
#media (min-width: 480px) {
.rwd-table th, .rwd-table td {
padding: 1em !important;
}
}
.rwd-table th, .rwd-table td:before {
color: #dd5;
}
This is a great pen for a responsive table, in most cases tables are not responsive. The media query looks at the size of the device and will display it as a block or none.


In most cases tables are not responsive friendly because of cell content and number of columns is big. So in those cases scrollbar at bottom is fine. But in your case you have only 4 columns - so you can use mediaquery in css and decrease font-sizes and th, td cells paddings and button sizes for mobile resolutions. Or use bootstrap classes for lower device resolutions.
Also please read rules and include code runner in question. Its not convenient to copy-paste and check on local.

Related

Float icon to the left and not add to text padding via CSS

I have a Bootstrap based app with a table that has 'indented' text in the first column. I would like to add an icon (Fontawsome) to the space in the indent. The icon is dynamic as its only displayed if there is a 'note' for that row. Here is what I want:
Here is what I have so far:
Here is my example code:
https://jsfiddle.net/jasper502/ju8we9b6/11/
I have tried different float, display options and can't seem to figure this out. I am sure it's easy - my CSS skills are pretty basic.
.row {
background: #f8f9fa;
margin-top: 20px;
}
td,
th {
border: solid 1px #6c757d;
padding: 10px;
}
.indent {
padding-left: 30px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="indent">Row 1</span>
</td>
</tr>
<tr>
<td>
<span><i class="fa fa-comment"></i></span>
<span class="indent">Row 2</span>
</td>
</tr>
<tr>
<td>
<span class="indent">Row 2</span>
</td>
</tr>
</tbody>
</table>

Updated as per comment:
You could then use absolute position on your icon container. This would not affect the position of its siblings irrespective of the icon's presence or absence.
.row {
background: #f8f9fa;
margin-top: 20px;
}
td,
th {
border: solid 1px #6c757d;
padding: 10px;
}
.indent {
padding-left: 30px;
}
.dummyIcon{
position: absolute;
left:10px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="indent">Row 1</span>
</td>
</tr>
<tr>
<td>
<span class="dummyIcon"><i class="fa fa-comment"></i></span>
<span class="indent">Row 2</span>
</td>
</tr>
<tr>
<td>
<span class="indent">Row 2</span>
</td>
</tr>
</tbody>
</table>
If you right align your second span containing the row name, it would work fine.
The bs4 class that I have used is float-right.
Also you would need to fix a width for your td, so if the icon disappears, your column width remains same.
Working snippet below:
.row {
background: #f8f9fa;
margin-top: 20px;
}
td,
th {
border: solid 1px #6c757d;
padding: 10px;
}
.indent {
padding-left: 30px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="indent float-right">Row 1</span>
</td>
</tr>
<tr>
<td>
<span><i class="fa fa-comment"></i></span>
<span class="indent float-right">Row 2</span>
</td>
</tr>
<tr>
<td>
<span class="indent float-right">Row 2</span>
</td>
</tr>
</tbody>
</table>

You are using a table instead of flex or so. Why not add the icon in a cell to the left - it will collapse if there is no icon OR you can make the cell width constant like your padding is now
.row {
background: #f8f9fa;
margin-top: 20px;
}
tr {
border: solid 1px #6c757d;
padding: 10px;
text-align:right
}
tr th {text-align:center}
td { padding: 10px; }
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table>
<thead>
<tr>
<th colspan="2">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Row 1</td>
</tr>
<tr>
<td><i class="fa fa-comment"></i></td>
<td>Row 2</td>
</tr>
<tr>
<td colspan="2">Row 2</td>
</tr>
</tbody>
</table>

You need to include the comment icon in every row - hidden by default - and make it appear only when it has the class visible using the following code:
.fa-comment:not(.visible) {
visibility: hidden;
}
And this is what it will look like:
.row {
background: #f8f9fa;
margin-top: 20px;
}
td,
th {
border: solid 1px #6c757d;
padding: 10px;
}
.indent {
padding-left: 10px;
}
.fa-comment:not(.visible) {
visibility: hidden;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span><i class="fa fa-fw fa-comment"></i></span>
<span class="indent">Row 1</span>
</td>
</tr>
<tr>
<td>
<span><i class="fa fa-fw fa-comment visible"></i></span>
<span class="indent">Row 2</span>
</td>
</tr>
<tr>
<td>
<span><i class="fa fa-fw fa-comment"></i></span>
<span class="indent">Row 2</span>
</td>
</tr>
</tbody>
</table>

Why is my HTML div going across the whole screen?

I've been working on a project for a few days now, and I keep coming across this problem. I have a table with data in it, and I want the padding to be 30px on each side, and the '.task-link' or 'header-6' to expand with the window. Instead the width of the div goes across the entire screen, and it doesn't look even, and it is killing me. Sorry, new to HTML, so cut me some slack please, I'm sure it's obvious, I've tried lots of different things to no success, and I don't see why it should be covering the whole screen. Anyway, here is my code:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
Here is an example of what is happening now, and what I want it to look like.
now: https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
what I want: https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
The table goes all the way, side to side,with a padding of 30px on each side, as well as the Header 6 expands to match the extend of the screen, and when it gets smaller, I want only the Header 6 to get smaller.

You can use bootstrap responsive table. Here the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px) and when viewing on anything larger than 768px wide, then it will display the table by using the full width of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>longtextlongtextlongtext</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

remove col-sm-8 and checkout bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/

A bootstrap grid always has to go within a row, Also a grid persists of 12 columns.
for example:
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
This will give 3 identical columns with the same width
Snippet:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
As you can see, This makes a whitespace spot on both sides of your screen.
Also https://getbootstrap.com/docs/4.0/layout/grid/ gives a lot of information, check it out for sure.

Using same width for viewport when vertical scrollbar is appearing and when the scrollbar is not appearing

I have the below bootstrap tabs, here the 'Active' tab contents are less than the view port and the 'pending review' tab contents are more than the view port so the vertical scrollbar is appearing. Here my problem is when i switch over the tabs, i see a jerk.Because the vertical scrollbar is not appearing on the first tab since its contents are less than the view port and it is occupying the scrollbar space. i wanted to prevent this jerk but i couldn't prevent. is this possible having the same width when scrollbar is appearing and when the scrollbar is not appearing?
.manage-rfq-row-one {
margin-top: 1.786rem;
}
1.
.manage-rfq-title>h1 {
margin: 0;
font-size: 2.429rem;
font-family: "Montserrat";
color: #393E41;
}
.manage-rfq-menu {
margin: 2.5rem 0 0.7143rem;
border-bottom: 2px solid #ddd;
}
.manage-rfq-menu>li>a {
font-size: 1rem;
font-family: "Montserrat";
color: #383D40;
padding: 10px 30px;
border: 2px solid transparent;
}
.manage-rfq-menu>li:first-child>a {
/*padding-left: 0px;*/
}
.manage-rfq-menu>li>a span {
background-color: #C7CACC;
}
.manage-rfq-menu>li.active>a span {
background-color: #ffcc29;
}
.manage-rfq-menu>li>a span .notification-count {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.manage-rfq-menu>li.active>a,
.manage-rfq-menu>li.active>a:focus,
.manage-rfq-menu>li.active>a:hover {
color: #000;
background-color: #fff;
border: 2px solid #ddd;
border-bottom-color: transparent;
}
.manage-rfq-menu>li {
margin-bottom: -2px;
}
.manage-rfq-menu>li>a:hover {
background-color: transparent;
border-color: transparent;
}
.manage-rfq-tbl {
border: 1px solid #ccc;
margin-bottom: 5px;
}
.manage-rfq-tbl>thead>tr>th {
color: #7C7D7E;
font-size: 0.85rem;
}
.manage-rfq-tbl>thead>tr>th:first-child {
padding-left: 1.786rem;
}
.manage-rfq-tbl>tbody>tr>td {
font-size: 1.071rem;
font-family: 'montserrat';
vertical-align: middle;
}
.manage-product-notification {
min-width: 20px;
min-height: 20px;
position: relative;
display: inline-block;
color: #65686A;
font-family: 'Lato';
border-radius: 50%;
font-weight: bold;
font-size: 0.7143rem;
vertical-align: bottom;
}
.manage-rfq-tbl>tbody>tr>td.mnage-prduct-title {
width: 26%;
padding-left: 1.786rem;
padding-top: 1.429rem;
padding-bottom: 1.429rem;
}
.mnage-prduct-img-wrap,
.posted-on-rfq {
width: 26%;
}
.expiry-date {
width: 19%;
}
.mnage-ur-prducts {
width: 29%;
}
.mnage-prduct-img {
width: 10.14rem;
height: 10.14rem;
padding-top: 1.571rem;
padding-bottom: 1.571rem;
}
.mnage-prduct-img>img {
width: 10.14rem;
height: 10.14rem;
border: 1px solid #ccc;
}
.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts i {
color: #B8C0C5;
padding-right: 0.3571rem;
}
.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts a {
padding-right: 2.143rem;
}
[data-ttip] {
position: relative;
}
[data-ttip]:hover:before {
content: attr(data-ttip);
position: absolute;
margin: 0;
bottom: 28px;
left: -6.143rem;
min-width: 16.29rem;
background-color: #F7FBFC;
font-size: 0.9286rem;
font-family: "Montserrat";
color: #6B6E70;
padding: 10px;
border-radius: 2px;
}
.mnage-prduct-resume>a[data-ttip]:hover:before {
left: -4.143rem;
}
[data-ttip]:hover:after {
content: '';
position: absolute;
border-top: 11px solid #F7FBFC;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
bottom: 18px;
left: 10px;
}
.mnage-prduct-resume>a[data-ttip]:hover:after {
left: 40px;
}
.mnage-ur-prducts i {
color: #686868 !important;
}
.mnage-rfq-search-box {
margin-top: 0.2857rem;
width: 15.86rem;
}
<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row manage-rfq-row-two">
<div class="col-sm-12">
<ul class="nav nav-tabs manage-rfq-menu">
<li class="active"><a data-toggle="tab" href="#home">ACTIVE <span class="manage-product-notification"><span class="notification-count">7</span></span></a></li>
<li><a data-toggle="tab" href="#menu1">PENDING REVIEW <span class="manage-product-notification"><span class="notification-count">77</span></span></a></li>
<li class="pointer"></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<table class="table manage-rfq-tbl">
<thead>
<tr>
<th>TITLE</th>
<th>POSTED / EDITED ON</th>
<th>EXPIRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="menu1" class="tab-pane fade">
<table class="table manage-rfq-tbl">
<thead>
<tr>
<th>TITLE</th>
<th>POSTED / EDITED ON</th>
<th>EXPIRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Apr 1, 2019</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> Pause</span>
<span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Resume Display</span> -->
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Kraft Paper Rolls</td>
<td class="posted-on-rfq">Feb 2, 2016</td>
<td class="expiry-date">Mar 7, 2019</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> Pause</span>
<span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Resume Display</span> -->
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</span>
<span><i class="fa fa-trash" aria-hidden="true"></i> Delete</ABBR></span></td>
</tr>
</tbody>
</table>
</div>

After some research, I came to know that we can prevent this by adding "overflow-y : scroll" property for html element.

Bootstrap responsive table disappears

I'm trying to do a responsive table but my table disappears in wide window and I can't understand why. My code is here, the line table responsive is commented so it works on wide screens and it is for me to see the table:
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting-Preços</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/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>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!--NavBar END-->
<div class="columns2">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns2">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns2">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Serviço</th>
<th>Descrição</th>
</tr>
<tr>
<td>Criação de website</td>
<td>A Empresa responsabiliza-se pela criação de um website a seu gosto</td>
</tr>
<tr>
<td>Dominio</td>
<td>A Empresa responsabiliza-se pela compra e manutenção do Dominio escolhido pelo utilizador</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
height:450px;
color:white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.columns2 {
float: left;
width: 33.3%;
padding-top: 70px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
.table{
color: black;
text-align:center;
}
.table th{
text-align:center;
}

it might be helpful.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>

May be .table-responsive class inherit or override in your css or any other css/library override it.
But I tried below example with table-responsive class it is working fine.
<!DOCTYPE html>
<html>
<head>
<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">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>324</td>
<td>123</td>
<td>000</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

The problem with this is that on this part:
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Serviços</th>
<th>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</tbody>
</table>
</div>
</div>
It only says the table to be responsive and not both a normal table and a responsive table, in order to change it I needed to do this:
<div class="table table-responsive">
instead of
<div class="table-responsive">

Add <div class="clearfix"></div> just above your table HTML, CSS of elements above your table code is inhering its properties to the table elements

Not working responsive?

I am trying to make my table responsive but its not happening. I don't know where is the problem. I am using bootstrap-responsive.css to make it happen, but the table is not breaking like other pages break when I open in mobile.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Untitled Document</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link type="text/css" href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="test/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap-combined.css" rel="stylesheet">
<link type="text/css" href="js/template.css" rel="stylesheet" />
<link href="test/flip-scroll.css" rel="stylesheet">
<style>
#tbl{
border: thin solid #eee;
}
#tbl td{
padding:5px;
border-bottom: thin solid #C4C4C4;
border-right:thin solid #eee;
}
#tbl tr:last-child td{
border-bottom:none;
}
#tbl td:last-child{
border-right:none;
}
#tbl tr:nth-child(odd){ background-color:#dafaf6; }
.heading{
color:#FFFFFF;
font-size:14px;
padding:10px;
text-align:center;
}
.clear
{
height:70px;
}
.current a
{
color:#FFF;
}
.divDemoBody {
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.divDemoBody p {
font-size: 18px;
line-height: 140%;
padding-top: 12px;
}
.divDialogElements input {
font-size: 18px;
padding: 3px;
height: 32px;
width: 500px;
}
.divButton {
padding-top: 12px;
}
</style>
</head>
<body>
<div style="width:100%; background-color:#1d719a; height:100px;">
<img src="nature/logo.png" style="margin:23px 0px 0px 30px;">
<div style="width:30%; float:right; text-align:right; margin-right:20px; margin-top:20px;">
<img src="images/home_icon.png" height="32" width="32"/>
<img src="images/logout.png" height="32" width="32" />
</div>
</div>
<div class="row" style="margin-left:50px; margin-top:50px">
<div class="span12" align="center">
<form method="get" action="/" class="form-inline" >
<input name="q" class="span5" type="text" placeholder="Keywords:Name" >
<button type="submit" class="btn btn-small btn-primary">Search<i class="icon-search icon-white"></i></button>
</form>
</div>
</div>
<div class="container" style="margin-top:60px;">
<div class="row-fluid">
<div class="span12">
<legend style="font-family:Georgia, 'Times New Roman', Times, serif; font-style:italic; color:#06C;">Patient Details</legend>
<table align="right" style="margin-right:50px"><tr><td><div class="pagination"><ul><li class="active"><a>1</a></li><li>2</li><li>3</li><li>»</li></ul></div></td></tr> </table>
<table cellpadding="0px" cellspacing="0px" border="0" style="width:90%" align="center">
<tr>
<td>
<section id="flip-scroll" style="margin-left:40px; width:100%">
<table class="table-bordered table-striped table-condensed cf" style="width:95%; ">
<thead style="background-color:#045c97;">
<tr>
<th class="heading">Patient Name</th>
<th class="heading">Date OF Birth</th>
<th class="heading" >Subject</th>
<th class="heading">Progress Note Date</th>
<th class="heading">Provider</th>
<th class="heading">Action</th>
</tr>
</thead>
<tbody style="font-size:12px;">
<tr>
<td>Shiv Acharya</td>
<td>06-03-1991</td>
<td>Suffering From high Fever</td>
<td>12-04-2013</td>
<td>SA</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Biswajeet Mahapatra</td>
<td>09-08-1991</td>
<td>Suffering From back pain</td>
<td>12-04-2013</td>
<td>BM</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Praveen jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Sahil Sahoo</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Akash Pattnaik</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Sheetam kumar jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Past Notes</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clear"> </div>
</section>
<!-- <table cellspacing="0" cellpadding="2" border="0" id="tbl" style="width:100%">
<tr style="background-color:#045c97">
<td class="heading">Patient Name</td>
<td class="heading">Date OF Birth</td>
<td class="heading">Subject</td>
<td class="heading">Progress Note Date</td>
<td class="heading">Provider</td>
<td class="heading">Action</td>
</tr>
<tr style="text-align:center;">
<td>Shiv Acharya</td>
<td>06-03-1991</td>
<td>Suffering From high Fever</td>
<td>12-04-2013</td>
<td>SA</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Biswajeet Mahapatra</td>
<td>09-08-1991</td>
<td>Suffering From back pain</td>
<td>12-04-2013</td>
<td>BM</td>
<td><div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div></td>
</tr>
<tr style="text-align:center;">
<td>Praveen jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Sahil Sahoo</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Akash Pattnaik</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Sheetam kumar jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Edit Demographics</li>
<li>New Encounter</li>
<li>View Pastvotes</li>
</ul>
</div>
</td>
</tr>
</table>-->
</td>
</tr>
</table>
<table align="right" border="0">
<TR align="right">
<TD><form action="clinic_p.html">
<input type="submit" class="btn btn-success" value="Add Patient">
</form></TD></TR>
</table>
</div>
</div>
</div>
<div style="background-color:#1d719a; height:80px; margin-top:20px;">
<div style="width:40%; font:Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold; color:#FFF;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td style="height:20px;" colspan="2"> </td></tr>
<tr><td style="width:5%"> </td><td>Copyrights 2013. All Rights Reserved.</td></tr>
</table></div>
<div style="width:40%; float:right; text-align:right; margin:-40px 30px 0px 0px;font:Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold; color:#FFF;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td style="height:20px;" colspan="2"> </td></tr>
<tr><td style="width:5%"> </td><td>Monyter Technologies Pvt. Ltd.</td></tr>
</table>
</div>
</div>
</body>
</html>
Any solutions will be great.

for making responsive table i usually use another style not of bootstrap
<style>
#page-wrap {
margin: 50px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
<!--[if !IE]><!-->
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
</style>
<!--<![endif]-->
and html
<div id="page-wrap">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Favorite Color</th>
<th>Wars or Trek?</th>
<th>Porn Name</th>
<th>Date of Birth</th>
<th>Dream Vacation City</th>
<th>GPA</th>
<th>Arbitrary Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
<td>Lettuce Green</td>
<td>Trek</td>
<td>Digby Green</td>
<td>January 13, 1979</td>
<td>Gotham City</td>
<td>3.1</td>
<td>RBX-12</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
<td>Blue</td>
<td>Wars</td>
<td>John Smith</td>
<td>July 19, 1968</td>
<td>Athens</td>
<td>N/A</td>
<td>Edlund, Ben (July 1996).</td>
</tr>
<tr>
<td>Jokey</td>
<td>Smurf</td>
<td>Giving Exploding Presents</td>
<td>Smurflow</td>
<td>Smurf</td>
<td>Smurflane Smurfmutt</td>
<td>Smurfuary Smurfteenth, 1945</td>
<td>New Smurf City</td>
<td>4.Smurf</td>
<td>One</td>
</tr>
<tr>
<td>Cindy</td>
<td>Beyler</td>
<td>Sales Representative</td>
<td>Red</td>
<td>Wars</td>
<td>Lori Quivey</td>
<td>July 5, 1956</td>
<td>Paris</td>
<td>3.4</td>
<td>3451</td>
</tr>
<tr>
<td>Captain</td>
<td>Cool</td>
<td>Tree Crusher</td>
<td>Blue</td>
<td>Wars</td>
<td>Steve 42nd</td>
<td>December 13, 1982</td>
<td>Las Vegas</td>
<td>1.9</td>
<td>Under the couch</td>
</tr>
</tbody>
</table>
</div>
hope this will work for you

If you were using foundation you could use http://zurb.com/playground/responsive-tables
But, you're not...so...
No my real reason here is to say, tables, normally aren't responsive. They do change to an extent, but they also have a minimum width. After they get so small, they just wont break.
Perhaps though, you could alter the responsive table code to work with bootstrap though.
Here's a perfect thread for you::
How to display tables on mobile using Bootstrap?

You might want to migrate to Bootstrap 3 as it now supports responsive tables to some extent: http://getbootstrap.com/css/#tables-responsive.
If so, you should be good by adding a <div class="table-responsive"> around your <table>.
Also http://bootply.com/bootstrap-3-migration-guide is quite helpful to migrate to Bootstrap 3.