Jquery 在固定列上实现数据表重叠问题

Jquery 在固定列上实现数据表重叠问题,jquery,twitter-bootstrap,datatable,datatables,Jquery,Twitter Bootstrap,Datatable,Datatables,我有下表 <table class="table display nowrap" cellspacing="0" width="100%" style="width:100%" id="pageRoleTable"> <thead class="text-primary"> <th>Name</th>

我有下表

<table  class="table display nowrap" cellspacing="0" width="100%" style="width:100%" id="pageRoleTable">
                            <thead class="text-primary">
                            <th>Name</th>
                            @foreach($role as $key=>$value)
                            <th>{{$value->role_name}}</th>
                          @endforeach
                            </thead>
                            <tbody>
                            @foreach($page as $key=>$value)
                            <tr>
                                <td>{{$value->page_name}}</td>
                                @for($i=0;$i<count($role);$i++)
                                <td><div class="checkbox checkbox-inline">
                                        <label>
                                            <input type="checkbox" data-pageId="{{$value->id}}"  data-role="{{$role[$i]['id']}}" name="role_access" value="edit">

                                        </label>
                                    </div>
                                </td>
                                    @endfor

                            </tr>

                                @endforeach


                            </tbody>
                            <tfoot>
                            <tr>
                                <td></td>
                                @foreach($role as $key=>$value)
                                    <td><button class="btn btn-info"  data-role="{{$value->id}}">
                                        <span class="btn-label">
                                            <i class="material-icons">priority_high</i>
                                        </span>
                                            Info
                                            <div class="ripple-container"></div></button></td>
                                @endforeach
                            </tr>
                            </tfoot>
                    </table>
但在给定固定列文本内容重叠后

遵循许多答案,但对我没有帮助


有人能帮我解决这个问题吗?我已经通过设置td和th的背景色解决了上述问题

.table tbody tr td{background:#fff /*set your own color*/} 
.table thead tr th{background:#fff /*set your own color*/} 
.table tbody tr td{background:#fff /*set your own color*/} 
.table thead tr th{background:#fff /*set your own color*/}