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

Question

我有下表

<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>

javascript

 $('#pageRoleTable').DataTable({


                    scrollY:        "300px",
                    scrollX:        true,
                    scrollCollapse: true,
                    paging:         false,
                    fixedColumns:   {
                        leftColumns: 4

                    }
                });

但在给出固定列文本内容重叠后

遵循了许多答案，但没有帮助我 Datatable Fixed Column (Right Only) Issue DataTable Fixed Column with Bootstrap's dropdown

谁能帮我解决这个问题

Answer 1

我通过设置td and th的背景色解决了上述问题

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