Responsive Table Bootstrap Spalten ausblenden

Question

Ich möchte in Bootstrap reaktionsfähige Tabelle verwenden, aber es ist etwas falsch mit meinem Code, dass es wahrscheinlich nicht funktioniert.

Hier ist mein Code:

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
/* Zebra striping */ 
 
tr:nth-of-type(odd) { 
 
    background: #eee; 
 
} 
 
th { 
 
    background: #333; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
td, th { 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    text-align: left; 
 
} 
 
@media 
 
only screen and (max-width: 760px), 
 
(min-device-width: 768px) and (max-device-width: 1024px) { 
 

 
\t /* Force table to not be like tables anymore */ 
 
\t table, thead, tbody, th, td, tr { 
 
\t \t display: block; 
 
\t } 
 
\t 
 
\t /* Hide table headers (but not display: none;, for accessibility) */ 
 
\t thead tr { 
 
\t \t position: absolute; 
 
\t \t top: -9999px; 
 
\t \t left: -9999px; 
 
\t } 
 
\t 
 
\t tr { border: 1px solid #ccc; } 
 
\t 
 
\t td { 
 
\t \t /* Behave like a "row" */ 
 
\t \t border: none; 
 
\t \t border-bottom: 1px solid #eee; 
 
\t \t position: relative; 
 
\t \t padding-left: 50%; 
 
\t } 
 
\t 
 
\t td:before { 
 
\t \t /* Now like a table header */ 
 
\t \t position: absolute; 
 
\t \t /* Top/left values mimic padding */ 
 
\t \t top: 6px; 
 
\t \t left: 6px; 
 
\t \t width: 45%; 
 
\t \t padding-right: 10px; 
 
\t \t white-space: nowrap; 
 
\t }

<table class="table table-responsive"> 
 
    <thead> 
 
    <tr> 
 
     <th>X Title</th> 
 
     <th>Y Title</th> 
 
     <th>Z Title</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
<tr> 
 
    <td> XXX </td> 
 
    <td> YYY </td> 
 
    <td> ZZZ </td> 
 
</tr> \t 
 
</tbody> 
 
    </table>

Es gibt etwas, das ich weiß nicht, wie es aus wie dieses folgende Bild arbeiten, um nur in Mobile oder kleinen Bildschirmgrößen:

Mobile View

**

In der mobilen Ansicht möchte ich X TITLE entfernen, wie es geht?

**

Vielen Dank im Voraus

Answer 1

Please follow the link 

http://codepen.io/srees/pen/KNPPJy?editors=1100 

Hope you got the answer 

body { 
 
    padding:1.5em; 
 
    background: #f5f5f5; 
 
} 
 

 
table { 
 
    border: 1px #a39485 solid; 
 
    font-size: .9em; 
 
    box-shadow: 0 2px 5px rgba(0,0,0,.25); 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    border-radius: 5px; 
 
    overflow: hidden; 
 
} 
 

 
th { 
 
    text-align: left; 
 
} 
 
    
 
thead { 
 
    font-weight: bold; 
 
    color: #000; 
 
    background: #d5d5d5; 
 
} 
 
    
 
td, th { 
 
    padding: 1em .5em; 
 
    vertical-align: middle; 
 
} 
 
    
 
td { 
 
    border-bottom: 1px solid rgba(0,0,0,.1); 
 
    background: #fff; 
 
} 
 

 
a { 
 
    color: #73685d; 
 
} 
 
    
 
@media all and (max-width: 768px) { 
 
    
 
    table, thead, tbody, th, td, tr { 
 
    display: block; 
 
    } 
 
    
 
    th { 
 
    text-align: right; 
 
    } 
 
    
 
    table { 
 
    position: relative; 
 
    padding-bottom: 0; 
 
    border: none; 
 
    box-shadow: 0 0 10px rgba(0,0,0,.2); 
 
    } 
 
    
 
    thead { 
 
    float: left; 
 
    white-space: nowrap; 
 
    } 
 
    
 
    tbody { 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
    white-space: nowrap; 
 
    } 
 
    
 
    tr { 
 
    width: 100%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 
    
 
    th { 
 
    border-bottom: 1px solid #f5f5f5; 
 
    } 
 
    
 
    td { 
 
    border-bottom: 1px solid #e5e5e5; 
 
    } 
 
    
 
    
 
    }

<table class="table table-responsive"> 
 
    <thead> 
 
    <tr> 
 
     <th>X Title</th> 
 
     <th>Y Title</th> 
 
     <th>Z Title</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> XXX </td> 
 
     <td> YYY </td> 
 
     <td> ZZZ </td> 
 
    </tr> 
 
    </tbody> 
 
</table>