Prathameshb7 Prathameshb7 - 10 months ago 50
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 Source

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

here is demo