未应用Jquery Datatables插件CSS默认值。分页和搜索显示在表的左侧。而且没有风格

我有一个以前使用displaytags的表。我决定将分页移动到浏览器上，这样可以更快。为此，我使用了datatables jquery插件。但是分页、搜索等都是F**********上的。一天以来我一直在努力解决这个问题，现在我没有多少时间了。请告诉我是什么引起的。下面是数据表、显示标签和一些结果图像

数据表：

$(document).ready(function() {
    $('#cmpReport').DataTable({
        "bAutoWidth" : false,
        "aoColumns" : [ {
            sWidth : '1%'
        }, {
            sWidth : '8%'
        }, {
            sWidth : '8%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '3%'
        }, {
            sWidth : '11%'
        }, {
            sWidth : '3%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        } ]
    });
});

显示标签：

<display:table htmlId="cmpReport" id="cmpReport" name="cmpReport" sort="external" partialList="true" size="bigSize" pagesize="${bSize}" style="table-layout: fixed; width: 100%; white-space: normal !important;" class="thinBorder stripe row-border    compact cell-border td.dt-center"
            requestURI="/CmpReportAction.do" export="false">
            <display:setProperty name="paging.banner.placement" value="none" />
            <%-- <display:setProperty name="paging.banner.group_size" value="5" /> --%>
            <display:setProperty name="css.tr.even" value="dataWh" />
            <display:setProperty name="css.tr.odd" value="coldata" />
            <%-- <display:setProperty name="export.pdf" value="true" />
            <display:setProperty name="export.csv.filename" value="cmpReport.csv" />
            <display:setProperty name="export.excel.filename" value="cmpReport.xls" />
            <display:setProperty name="export.pdf.filename" value="cmpReport.pdf" />
            <display:setProperty name="export.xml.filename" value="cmpReport.xml" />
            <display:setProperty name="export.csv.include_header" value="true" />
            <display:setProperty name="export.excel.include_header" value="true" />
            <display:setProperty name="export.pdf.include_header" value="true" /> --%>
            <display:column headerClass="tableHead" title=" " style="text-align:center" media="html">
                <img class="expand" alt="" src="images/plus.jpg" onclick="toggleHawbInfo(this.parentNode.parentNode)" />
            </display:column>
            <display:column headerClass="repsub" title="MBL" property="mblno" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxMLB" />
            <display:column headerClass="repsub" title="HAWB" property="hblno" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxHawb" />
            <display:column headerClass="repsub" title="Compliance" property="compliance" style="word-wrap: break-word; text-align: center;" sortable="false" />
            <display:column headerClass="repsub" title="Total<br> Scanned<br> Docs" property="totalScanned" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxTSD" maxLength="10" />
            <display:column headerClass="repsub" title="STT" property="stt" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxSTT" />
            <display:column headerClass="repsub" title="Product" property="product" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxProd" />
            <display:column headerClass="repsub" title="Ship#" property="archive_Num" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxShip" />
            <display:column headerClass="repsub" title="Ship date" property="shpmt_create_date" style="word-wrap: break-word; text-align: center;" sortable="false" maxLength="10" class="ajaxShipDt" />
            <display:column headerClass="repsub" title="Ship NAD" property="shpr_id" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxShipNad" />
            <display:column headerClass="repsub" title="Ship Name" property="shipper" style="word-wrap: break-word; text-align: center;" sortable="false" maxLength="10" class="ajaxShipName" />
            <display:column headerClass="repsub" title="Cons NAD" property="csgn_id" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxConsNad" />
            <display:column headerClass="repsub" title="Cons Name" property="consignee" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxCons" />
            <display:column headerClass="repsub" title="Pay Term" property="service_type" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxPay" />
            <display:column headerClass="repsub" title="Inco Term" property="inco_terms" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxInco" />
            <display:column headerClass="repsub" title="Dep" property="org" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxDep" />
            <display:column headerClass="repsub" title="Destination" property="des" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxDest" />
            <display:column headerClass="repsub" title="Service Level" property="serv_lvl_code" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxSL" maxLength="10" />
        </display:table>

现在是最后结果的图片。

编辑：包含搜索和分页按钮的div具有以下属性

<div class="dataTables_paginate paging_simple_numbers" id="cmpReport_paginate">

上一个12345…下一个

<div id="cmpReport_filter" class="dataTables_filter">

---

搜索：

好的。。伙计们。。我犯了个错误。。数据表附带的数据表css位于名为datatables/css的文件夹中，我把它搞错了。正确的操作为我解决了这个问题。

最好右键单击它们并检查浏览器上的元素。看起来包装这些内容的容器的宽度不正确。我右键单击并检查了正在应用的css类。他们有正确的名字。将它们添加到问题中以供参考容器的css宽度集是多少。单击包含它们的HTML时，应在浏览器中以蓝色亮显它们。然后检查css并找到宽度。包含表格的div以及搜索、分页和显示“10”结果选项的长度为1140 Px，高度为454 Px。对于其中的每个容器，长度为1140，这意味着它们不适合屏幕。试着在中间划一条线，看看这是否有帮助。你的网站是活的，所以我可以看看吗？