jquery - 移动响应时隐藏表的表头

Question

我正在使用 jQuery Datatables 并为此创建了表格。我有一项任务是让它具有移动响应能力，我做到了。但是当我在移动 View 中查看表格时，我想完全隐藏表格标题，它应该恢复正常，就像在正常屏幕上应该显示标题一样。

更具体地说，我通常可以使用 css 隐藏标题，但是当我启用垂直滚动到我的表格时，我的标题在我不想要的移动 View 中变得可见。

示例表代码。重复数据进行测试。

<table id="no-more-tables">
<thead>
    <tr>
        <th>Code</th>
        <th>Company</th>
        <th class="numeric">Price</th>
        <th class="numeric">Change</th>
        <th class="numeric">Change %</th>
        <th class="numeric">Open</th>
        <th class="numeric">High</th>
        <th class="numeric">Low</th>
        <th class="numeric">Volume</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.     </td>
        <td data-title="Price" class="numeric">$1.38</td>
        <td data-title="Change" class="numeric">-0.01</td>
        <td data-title="Change %" class="numeric">-0.36%</td>
        <td data-title="Open" class="numeric">$1.39</td>
        <td data-title="High" class="numeric">$1.39</td>
        <td data-title="Low" class="numeric">$1.38</td>
        <td data-title="Volume" class="numeric">9,395</td>
    </tr>
    <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.     </td>
        <td data-title="Price" class="numeric">$1.38</td>
        <td data-title="Change" class="numeric">-0.01</td>
        <td data-title="Change %" class="numeric">-0.36%</td>
        <td data-title="Open" class="numeric">$1.39</td>
        <td data-title="High" class="numeric">$1.39</td>
        <td data-title="Low" class="numeric">$1.38</td>
        <td data-title="Volume" class="numeric">9,395</td>
    </tr>
    <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.     </td>
        <td data-title="Price" class="numeric">$1.38</td>
        <td data-title="Change" class="numeric">-0.01</td>
        <td data-title="Change %" class="numeric">-0.36%</td>
        <td data-title="Open" class="numeric">$1.39</td>
        <td data-title="High" class="numeric">$1.39</td>
        <td data-title="Low" class="numeric">$1.38</td>
        <td data-title="Volume" class="numeric">9,395</td>
    </tr>
</tbody>
</table>

相同的 css 是:

<style>
@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#no-more-tables table, 
#no-more-tables thead, 
#no-more-tables tbody, 
#no-more-tables th, 
#no-more-tables td, 
#no-more-tables tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

#no-more-tables tr { border: 1px solid #ccc; }

#no-more-tables td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
    white-space: normal;
    text-align:left;
}

#no-more-tables td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
}

/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
</style>    

表转数据表的jQuery代码:

<script>
$(document).ready(function (){
$('#no-more-tables').DataTable({
"bSort" : false,
"paging" : false,
"info" : false,
"searching" : false,
"bProcessing" : true,
"scrollY":"400px",
"scrollCollapse": true,
"scrollX": false
});
});
</script>

Answer 1

因为您正在使用数据表，所以它正在改变 dom。 所以在 css 中用#no-more-tables_wrapper 替换#no-more-tables。 你的代码会工作。请检查确认