用户需要批准并且如果他希望拒绝某些记录。为此我在每个记录（行）中创建了2个复选框（只能选择1个） 表单中的表格.Records还有一个＆＃34; comment＆＃34;它可以有很长的多行文本。
我面临的问题（我解决了一个问题和其他问题）
1）如何在不隐藏列名的情况下垂直滚动表格。 我尝试了很多方法，但这会干扰列名与列中数据的对齐。
2）由于评论可以包含很多行。如何在表格中显示它而不在其他列上覆盖内容。 我尝试用省略号截断内容并在鼠标悬停时显示内容，但这也覆盖了附近列上的注释文本。
以下是包含横幅，导航栏，面板＆gt;的代码。形式＆gt;表格+提交按钮
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header">
<div class="well well-sm"><H1 align="center">BANNER</H1></div>
</div>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebApp</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/Page1">Page1</a></li>
<li><a href="/Page2">Page2</a></li>
<li><a href="/Page3">Page3</a></li>
<li class="active"><a href="/Page4">Page4</a></li>
<li><a href="/Page5">Page5</a></li>
</ul>
</div>
</nav>
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel panel-default">
<form method="POST" action="/approve_2" class="form-horizontal" role="form">
<div class="panel-heading"><H3 align="center" class="well well-sm">Approve Records</H3></div>
<input type="hidden" name="hidden1" value=Internet Explorer />
<input type="hidden" name="hidden2" value=2 /> <input
type="hidden" name="hidden3" value=Internet Explorer />
<div class="panel-body" >
<div class="mytable">
<table class="table table-fixed">
<div class="myhead">
<thead>
<tr>
<div class="col-md-1"><th>Approve</th></div>
<div class="col-md-1"><th>Reject</th></div>
<div class="col-md-6"><th>Comment</th></div>
<div class="col-md-2"><th>Preview</th></div>
</tr>
</thead>
</div>
<div class="myrows">
<tr>
<div class="col-md-1">
<td><input type="checkbox" name="records"
id=1
value=1
onclick="document.getElementById('DEL_1').checked=false;"> 1
</td>
</div>
<div class="col-md-1">
<td><input type="checkbox" name="toDelete" id=DEL_1
value=1
onclick="document.getElementById('1').checked=false;">1
</td>
</div>
<div class="col-md-6">
<td>hgalkjdfnvlkaudhglkajfauehfpausdihnvbvdfgaouerfyli</td>
</div>
<div class="col-md-2">
<td >
john@example.com
</td>
</div>
</tr>
<tr>
<div class="col-md-1">
<td><input type="checkbox" name="records"
id=2
value=2
onclick="document.getElementById('DEL_2').checked=false;"> 2
</td>
</div>
<div class="col-md-1">
<td><input type="checkbox" name="toDelete" id=DEL_2
value=1
onclick="document.getElementById('2').checked=false;">2
</td>
</div>
<div class="col-md-6">
<td>hgalkjdfnvlkaudhglkajfauehfpausdihnvbvdfgaouerfyli</td>
</div>
<div class="col-md-2">
<td >
john@example.com
</td>
</div>
</tr>
</div>
</table>
</div>
<div class="col-md-5"></div>
<div class="col-md-2">
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
</div>
<div class="col-md-1"></div>
</div>
</body>
</html>