table footer misalignment with table body

tonykai

Hello ,

I have one problem need your help , I create a normal stable with dataTable and Bootstrap 3 . After i only add standard table footer tag , I find out that table footer misalignment with table body . i attached error picture .Please give me some suggestion .
below is my html code :

<tfoot> <tr> <th colspan="8">tfoot</th> <th >tfoot</th> <th>tfoot</th> </tr> </tfoot>

序号 No		ID	栏目名称 name	状态 status	属性 attr	所属模型 model	所属父栏目 cate	排序 sort	操作 operation

Thanks.

BR
Kai

colin

Hi Kai,

I just tried that here but the alignment is fine for me. Would you be able to modify that example so that it demonstrates the problem, or could you provide a link to your page?

Cheers,

Colin

tonykai

Hello Colin ,

Below is my webpage link
http://tonyweb.frp3.chuantou.org/bick/admin/cate/lst.html

by the way ,

i put a button for select all rows when click this button in this table header , below is my code ,
$('#btn_select_all_rows').click(function(){
//console.log(dt);
dt.rows().select();
});

but chome always show a error information to me

Uncaught TypeError: dt.rows(...).select is not a function

below is screen shut pic

Please help me check .

Thanks
BR
Kai

bindrid

@Colin take a look at his raw HTML. He has a div that contains the table that is just a body and head. Another div that contains a table that contains just the footer.

There is no way to guarantee that they will line up when they are in separate tables.

colin

Thanks for looking, @bindrid . @tonykai , that link seems dead today - did you resolve the issue?

tonykai

Hello Colin ,
Sorry , the network just now restore .

BR
Kai

tonykai

Hello Bindrid ,

In html template file , table head and table body with tfoot in same div .

below is code .

<div class="">
    <form id="f_cate" action="" method="post" onsubmit="return false;">
                                    
    <input type="hidden" name="form_token" value="" />
                                    
    <table id="t_list" class="table table-striped table-bordered table-hover ">
        <thead>
           <tr>
               <th class="text-center" style="color:#333;font-weight: normal;">序号 No</th>
               <th class="text-center" style="color:#333;font-weight: normal;">
                <label class="pos-rel">
                <input id="btn_checkall" type="checkbox" class="ace">
                <span class="lbl"></span>
                </label>
            </th>
            <th class="text-center" style="color:#333;font-weight: normal;">ID</th>
            <th class="text-center" style="color:#333;font-weight: normal;">栏目名称 name</th>
                 <th class="text-center" style="color:#333;font-weight: normal;">状态 status</th>
                 <th class="text-center" style="color:#333;font-weight: normal;">属性 attr</th>
            <th class="text-center" style="color:#333;font-weight: normal;">所属模型 model</th>
            <th class="text-center" style="color:#333;font-weight: normal;">所属父栏目 cate</th>
            <th class="text-center" style="color:#333;font-weight: normal;">排序 sort</th>
            <th class="text-center" style="color:#333;font-weight: normal;">操作 operation</th>
            </tr>
            </thead>
            <tfoot style="">
             <tr>
             <th colspan="8" style="border:1px solid red;">tfoot</th>
             <th style=""></th>
             <th style=""></th>
             </tr>
             </tfoot>
            <tbody>
            </tbody>
    </table>
    </form>
    </div>

but once dataTable obtain data via ajax , and complete draw , table head and table body isn't same div with tfoot .

BR
Kai

allan

Hi Kai,

Could you try two things for me please:

1. Update to the nightly version of DataTables
2. Add style="width:100%" to your table.

That might help, although I'm a little concerned that this is actually going to be a really difficult one to fix!

Allan

tonykai

Hello Allan ,

According your method , I try complete update my dataTable version and dataTable bootstrap version to the lastest version (1.10.16) and Add style="width:100%" to my table.，I find out table footer still misalignment with table body under chrome explorer , but show is correct under 360 explorer and Microsoft Edge explorer .

BR
Kai

allan

I lost track of this one - sorry! Are you able to put the page back up if this is still giving you problems? Also there is now DataTables 1.10.18 available which it might be worth updating to just to check, although I don't think it will make any difference.

Allan

tonykai

Dear Allan ,

Thank your help , You are right , I had been update version to 1.10.18 ,but this issue is still exist under chrome explorer .

By the way ,

i have other question need your help, I had been success post a new question in past one weeks, but this new question isn't still display on Discussions list .

Are you have similar same problem ？
Please give me some suggestion .

Thanks
BR
Kai

allan

I've just added a reply to your other thread - it got caught in the spam queue.

I don't have an immediate answer for this one I'm afraid. Its going to take some time to debug.

Allan