javascript - 数据表 : search field position misaligned

Question

我目前正在使用 JSP 和 DataTables 制作一个小型网站(目前仅适用于第一个表)。
这是我目前所拥有的:

如您所见，搜索字段存在位置问题。我真的不知道是什么原因造成的。我想要的是搜索字段的末尾不超过底部表格的边界。
这是我的 HTML:

<TABLE class="table table-striped table-bordered" id="usertable" style="max-width: 800px">
<thead>
        <TR>
            <Th colspan=2 align=center><FONT color="blue">Toto</font><br>
                <i> (toto@toto.be) </i><b><FONT color = "red">Administrateur</b></font>
            </Th>
            <Th colspan=1 align=center><a href="UserUpdate?action=update&id=2">
                <button type="submit" class="btn btn-default"><FONT color="green"><span class ="glyphicon glyphicon-user">
                </span> Editer mon compte</FONT>
                </button></a>
            </Th>
        </TR>

        <TR>
            <Th width=40% align="center"><span class ="glyphicon glyphicon-calendar"></span> Date de la pêche</Th>
            <Th width=40% align="center"><span class="glyphicon glyphicon-dashboard"></span> Poids du poisson (Kg)</Th>
            <Th width=20% align="center"><i>Action</i></Th>
        </TR>
</thead>

<tbody>
        <TR>
            <TD width=40% align="center">03-07-2014</TD>
            <TD width=40% align="center">24.0</TD>
            <TD width=20% align=center><a href="FlightUpdate?action=delete&idvol=1">
                <button type="submit" class="btn btn-default" onclick="return confirm('Ok pour supprimer le vol ?')">
                <FONT color="purple"><span class="glyphicon glyphicon-trash"></span> Supprimer pêche</FONT>
                </button></a></TD>
        </TR>
        <TR>
            <TD width=40% align="center">22-08-2014</TD>
            <TD width=40% align="center">42.0</TD>
            <TD width=20% align=center><a href="FlightUpdate?action=delete&idvol=2">
                <button type="submit" class="btn btn-default" onclick="return confirm('Ok pour supprimer le vol ?')">
                <FONT color="purple"><span class="glyphicon glyphicon-trash"></span> Supprimer pêche</FONT>
                </button></a></TD>  
        </TR>
</tbody>
</TABLE>

还有我的 JS 选择器:

<script>
$(document).ready(function() {
    $('#usertable').dataTable( {
        "dom": '<"top"fp<"clear">>rt'
    } );
      //$('.carousel').carousel();
});
</script>

当然，我使用的是 JQuery 库:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.css">
<link rel="stylesheet" href="css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>         
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

我可以做些什么来让 sDom 正确对齐吗？
非常感谢!

Answer 1

数据表搜索框将扩展显示区域的整个宽度，在您的示例中是整个视口(viewport)。为了更正此问题，您将需要一个包装器(或)来设置表格将使用的区域的最大值。

 <div style="max-width: 800px">
    <table class="table table-striped table-bordered" id="usertable" style="max-width: 800px">
     ........
    </table>
  </div>