表格不适合屏幕。尝试了大多数组合，但没有工作。 业余的，需要帮助。
我不知道什么是错的，也许是一些愚蠢的错误而且找不到任何错误
<!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>
表格显示不好，部分是问题
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>
答案 0 :(得分：1)
您需要使用表格响应类将表格包装在div中，并且不要将其直接包装到行类
答案 1 :(得分：1)
如果你想在屏幕上放置表格，请将表格代码保留在具有“col-md-8 col-md-offset-2”类的div之外 如果表格溢出屏幕，您可以使用class table-responsive作为表的父级。
答案 2 :(得分：0)
它适合什么尺寸的屏幕？ Bootstrap 3有一个.table-responsive类，可以添加到表中，允许在小于768px宽的设备上进行水平滚动。这方面的文档是here。