相关疑难解决方法(0)

我有一个问题,使用jQuery DataTables插件控制表的宽度.该表应该是容器宽度的100%,但最终是任意宽度,而不是容器宽度.

建议表示赞赏

表声明如下所示

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

和javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

检查Firebug中的HTML,你会看到这一点(注意添加的样式="width:0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

在样式中查看Firebug,table.display样式已被覆盖.看不出这是从哪里来的

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

我已经在datatables.net论坛上发布了这个,但一周之后,仍然没有回应.希望我能在这里找到帮助......

我正在使用数据表版本1.8.1,并且在启用垂直滚动的情况下对列标题对齐进行了噩梦.

使用下面发布的代码,标题在Firefox和IE8和IE9中正确排列,但Chrome和IE7关闭.我在这个项目中使用了很多数据表,这对每个人来说都是一个问题.我迫切需要帮助!

编辑:我已经发现这与设置表格的宽度有关.数据表占用其容器的宽度.如果我没有设置宽度,一切都很好(但桌子太大了,无法在页面上需要它).如果我将表格的div(或某个较高的父级div)给予宽度,则标题不会正确排列.

谢谢!!

截图:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_al​​ignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" …