Javascript 数据表：搜索字段位置未对齐

我目前正在使用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>

Toto

(toto@toto.be)管理员
佩切日期
泊松点（Kg）
行动
03-07-2014
24
22-08-2014
42

和我的JS选择器：

$（文档）.ready（函数（）{
$（'#usertable'）。数据表（{
“dom”：“rt”
} );
//$（'.carousel'）.carousel（）；
});

当然，我正在使用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吗？

---

非常感谢

数据表搜索框将扩展显示区域的整个宽度，在您的示例中，显示区域是视图端口的整个宽度。为了纠正这一点，您需要有一个包装器（或）来设置表将使用的区域的最大值

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

........

这太简单了。。。我为什么不早点想一想呢：-）多谢了，很好用！

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