如何正确对齐DataTable搜索和列表框

时间:2014-07-16 11:06:37

标签: css jquery-datatables

This is the output i am getting after this code i want the alignment properly我使用datatables.So表示一些数据在此操作中我正确获取数据并且排序选项也可用,但问题是搜索框和列表框未正确对齐。我正在发布代码......

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#metalPager').dataTable( {
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "aoColumns": [ 
                    { "bSortable": true },              
                    { "bSortable": true },
                    { "bSortable": true },

                    { "bSortable": true }                       

                ]                   

            } );
        } );
</script>
<table width='70%' cellpadding="0" cellspacing="0" border="1"
    class="metalDisplay">
    <thead>
        <tr>
            <th>Congratulations....</th>
        </tr>
    </thead>

</table>
</br>
<table align="center" width='70%' cellpadding="0" cellspacing="0" border="1" id="metalPager">
    <thead>
    <tr>
         <th>SAPCODE</th>
        <th>FIRST NAME</th>     
        <th>LAST NAME</th>                          
        <th>STATUS</th>

    </tr>
    </thead>
    <tbody>
        <logic:iterate name="listOfSTPUsers" id="listOfSTPUsersId">
            <tr>
            <td><bean:write name="listOfSTPUsersId"  property="sapcode"/></td>
            <td><bean:write name="listOfSTPUsersId"  property="firstname"/></td>
            <td><bean:write name="listOfSTPUsersId"  property="lastname"/></td>             
            <td><bean:write name="listOfSTPUsersId"  property="status"/></td>
            </tr>
        </logic:iterate>
    </tbody>


</table>

这是dataTables的css

.dataTables_wrapper { position: relative; min-height: 302px; _height: 302px; clear:  both; }
.dataTables_processing { position: absolute; top: 0px; left: 50%; width: 250px;  margin-left: -125px; border: 1px solid #ddd; text-align: center; color: #999; font-size: 11px; padding: 2px 0; }
.dataTables_length { width: 40%; float: left; font-size:13px; font-weight:bold; color:#70A76A; padding: 5px 0; }
.dataTables_filter { width: 50%; float: right; text-align: right; font-size:13px; font-weight:bold; color:#70A76A; padding-bottom:35px; }
.dataTables_info { width: 60%; float: left; font-size:13px; color:#70A76A; padding-top:5px; }
.dataTables_paginate { width: 44px; * width: 50px;  float: right; text-align: right; padding-top:5px; }

这是我的代码。我无法正确对齐它。请帮助

0 个答案:

没有答案