HTML - 表格背景渗透

时间:2016-11-22 12:37:56

标签: javascript html css datatables responsive

我将datatables.js与普通表格一起使用,根本没什么特别的,请看截图(和问题):
enter image description here

以下是代码的链接:
http://pastebin.com/LfmHkfS2

HTML:

    <table cellspacing="0" cellpadding="0" class="responsive all" id="highscore">
                        <thead>
                            <tr>
                                <th class="all">
                                    Benutzername
                                </th>
                                <th class="all">
                                    Badges
                                </th>
                                <th class="all">
                                    Kalorien
                                </th>
                            </tr>
                        </thead>
                        <tr class="user">
                            <td class="username all" data-id="123">
                                Max Mustermann
                            </td>
                            <td class="badges_count">
                                4
                            </td>
                            <td class="calories">
                                200
                            </td>
                        </tr>
</table>  

JS:

$('#highscore').DataTable({
     bFilter: false,
     bInfo: false,
     bLengthChange: false,
     ordering: false,
     responsive:true,
     responsive: {
        details: false
    }
 });

CSS:

table {
        width: 670px;
        border-radius: 5px;
        border: 2px solid #575656;
        border-spacing: 0;
        background-color: white;
        margin: 0 auto;

        @include media ('<=phone') {
           width: 280px;
           margin: 0 auto;
       }
       thead {
           background-color: #ffc107;
           tr {
               font-size: 24px;
               color: white;
               text-transform: uppercase;
               text-align: left;
               height: 75px;
               @include media ('<=phone') {
                   font-size: 12px;
                   height: 40px;
               }
               th {
                   &:first-child {
                       padding-left: 35px;
                       border-bottom-left-radius: 5px;
                       @include media ('<=phone') {
                           padding-left: 10px;
                       }
                   }
                   &:last-child {
                       border-bottom-right-radius: 5px;
                   }
               }
           }
       }
       .user {
           height: 55px;
           .username {
               padding-left: 35px;
               font-family: $font-arial;
               color: #575656;
               font-size: 24px;
               @include media ('<=phone') {
                   font-size: 12px;
                   padding-left: 10px;
               }
           }
       }
   }

一切都在一个因为长度。

说明
我桌子上有一个黄色的。一旦我调整浏览器或视口的大小,&#34;边界&#34;出现在所有细胞上。

我注意到数据表为表格和/或单元格添加了自定义宽度。一旦我增加或减少几个px,边界似乎就消失了。

有人有这个问题吗?

编辑:
这个&#34;边界&#34;从桌子的背景看似乎是一种流血。背景是白色的,一旦我将其更改为红色,边框就是红色。

0 个答案:

没有答案