Question

我正在使用jquery Datatables，我已经创建了相同的表。我有一个任务，使我的移动响应，我做到了。但我想在移动视图中查看表格时完全隐藏表格标题，它应该恢复正常，就像在正常屏幕上显示标题一样。

更具体一点我能够通常使用css隐藏标题但是当我启用垂直滚动到我的表格时，我的标题在移动视图中变得可见，我不想要。

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

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

用于将表转换为datatable的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。你的代码也可以运行。请检查并确认

移动响应时隐藏表的表头

1 个答案: