モバイルレスポンス時にテーブルのテーブルヘッダーを非表示にする

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>  

データテーブルにテーブルを変換するための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を置き換えます。 あなたのコードは動作します。確認して確認してください