Question

我目前正在使用JSP和DataTables创建一个小型网站（目前仅用于第一个表）。
以下是我到目前为止的情况：
illustration of the problem with the search field position

如您所见，搜索字段存在位置问题。我真的不知道造成这种情况的原因。我想要的是，搜索字段的结尾不会超过底部表格的边界。
这是我的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

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

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

DataTables：搜索字段位置未对齐

1 个答案: