我将datatables.js与普通表格一起使用,根本没什么特别的,请看截图(和问题):
以下是代码的链接:
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;从桌子的背景看似乎是一种流血。背景是白色的,一旦我将其更改为红色,边框就是红色。