How to make Responsive Table using bootstrap 2.3.2 version

[shahzadsiddiqui8]

Hi
I am creating a Table using bootstrap 2.3.2 Version, but when I am re-sizing the window, Table is not shrinking as per browser size, please suggest me how I can achieve responsive view Table using bootstrap 2.3.2 version.

<div class="row-fluid">
				<div class="container">
					<table class="table table-bordered">
						<tr>
							<td colspan="4" align="center">
								ATTUID : <span id="spnATTUID"></span>
							</td>
						</tr>
						<tr>
							<td class="pt10">First Name :</td>
							<td><input type="text" class="input-large" placeholder="First Name" name="DTS_CTTUserID" id="FirstName"></td>
							<td class="pt10">Last Name :</td>
							<td><input id="LastName" type="text" style="width: 180px" /></td>
						</tr>
						<tr>
							<td class="pt10">Email Prefix :</td>
							<td><input type="text" class="input-large" placeholder="First Name" name="DTS_CTTUserID" id="EmailPre"></td>
							<td class="pt10">Email Ext :</td>
							<td>
								<select class="dropdown" id="EmailExtID" name="EmailExtID" style="width: 180px"><option value="">&lt; -- Select One -- &gt;</option>
									<option value="21">@gmail.com</option>
									<option value="19">@hotmail.com</option>
									<option value="16">@yahoo.com</option>
									<option value="1">@rediffmail.com</option>
									
								</select>
							</td>
						</tr>
						<tr>
							<td class="pt10">Phone :</td>
							<td colspan="4"><input type="text" class="input-large" placeholder="First Name" name="DTS_CTTUserID" id="Phone"></td>	                
						</tr>
						
					</table>	
				</div>
			</div>

			<div class="row-fluid">
				<div class="container-fluid">
					<table class="table table-bordered">
						<thead>
							<tr style="background-color:#ccc;">
								<th>UserID</th>
								<th>Title</th>
								<th>Supervisor</th>
								<th>Application</th>
								<th>Access Type</th>
								<th>Active</th>
								<th>Center</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>AA7989</td>
								<td>Dispute Specialist</td>
								<td>Avila,Norma</td>
								<td>DTSMOW</td>
								<td>Full Access</td>
								<td>Yes</td>
								<td>CCLA Cary</td>
								<td>
									<input type="button" class="btn btn-primary" value="View" onclick="GetUserInfo();" id="btnSearch">
									<input type="button" class="btn btn-primary" value="Edit" onclick="GetUserInfo();" id="btnSearch">
								</td>
							</tr>
							
						</tbody>	
					</table>
				</div>
			</div>

[PVgr]

Tables are “responsive” by design but the minimum width is determined by the contents. In other words, tables do not respect max widths if the contents cannot break further. You need something like tablesaw for true “responsive” behavior.