Prathameshb7 Prathameshb7 - 11 days ago 5
CSS Question

Cannot fit table columns on page with bootstrap


table doesn't fit on the screen. tried with most of the combination but doesn't work.
amateur, help needed.


i don't know whats going wrong maybe some silly mistake and wasn't able to find any mistake

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generate</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header" >
<a class="navbar-brand" href="index.html"> <img alt="Brand" src="slideshow/img.png" style="height: 40px; display: inline-block; margin-top: -5px"> </a>
</div>
<ul class="nav navbar-nav" >
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">Generate POR</a></li>
<li><a href="Update\Adminlogin.html">Update POR</a></li>
<li><a href="video.html">Help</a></li>
<li><a href="contact.html">Contact us</a></li>

</ul>

<form class="navbar-form navbar-right">
<div class="form-group" id="demo">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

<form class="navbar-form navbar-right">
<div class="form-group" id="txt1" style="color: aliceblue; margin-top: -5px" >

</div>
</form>

</div>
</nav>

<div class="col-md-8 col-md-offset-2">
<div class="row">
<form>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>P O Date</label>
<input type="date" class="form-control">
</div>
<div class="col-sm-6 form-group">
<label>Category</label>
<select class="form-control" >
<option>Technology</option>
<option>Business</option>
<option>Development</option>
<option>Process</option>
</select>
</div>
</div>
</div>

<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>Location</label>
<select class="form-control" >
<option>Bengaluru</option>
<option>Mumbai</option>
<option>Pune</option>
</select>
</div>
<div class="col-sm-3 form-group">
<label>Type of training</label>
<select class="form-control" >
<option>RBI</option>
<option>PST</option>
<option>Org needs</option>
</select>
</div>
<div class="col-sm-3 form-group">
<label>Venue Details</label>
<select class="form-control" >
<option>Mumbai</option>
<option>Bengluru</option>
<option>Pune</option>
</select>
</div>
</div>
</div>

<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<div class="form-group">
<label>Vendor Address</label>
<textarea placeholder="Vendor Address Here.." rows="3" class="form-control"></textarea>
</div>
</div>

<div class="col-sm-6 form-group">
<div class="form-group">
<label>Billing Address</label>
<br>
Billing Address :<br>
Quinnox Consultancy Services Ltd.;<br>
Unit 170,SDF VI, SEEPZ SEZ,<br>
Andheri(East), Mumbai-400096<br>

</div>
</div>
</div>
</div>



Display of tables isnt good below part is the problem
table doest fit on the screen



<div class="col-sm-12">
<div class="row">
<table class="table table-condensed table-striped table-hover" align="center">
<thead class="thead-inverse">
<tr>
<div class="form-group">

<th>Subject</th>
<th>Faculty</th>
<th colspan="2" align="center">Date</th>
<th>Days</th>
<th>Batch Size</th>
<th>Rate per day</th>
<th>Approx Expected value(INR)</th>
</div>
</tr>
</thead>

<tbody>
<tr>
<div class="form-group">
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="date"/></td>
<td><input type="date"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>




</form>
</div>
</div>

</body>
</html>

Answer

you need to wrap the table in div with a class table-responsive and dont wrap it directly to row class

here is demo