html - Hide element tr in table with css -

i try hide element inside table using css , problem no works , hide element , code it's next:

.table_cols {    width: 100%;    height: 200px;    margin: auto;  }  .td_cols {    width: 20%;    height: 200px;    text-align: center;    background-color: green;  }  .table_scale {    display: none;  }  .table_scale_end {    display: none;  }

<table class="table_cols">      <tr>      <td class="td_cols">col 1</td>    </tr class="table_scale_end">      <tr class="table_scale">      <td class="td_cols">col 2</td>    </tr class="table_scale_end">      <tr class="table_scale">      <td class="td_cols">col 3</td>    </tr class="table_scale_end">      <tr class="table_scale">      <td class="td_cols">col 4</td>    </tr>    </table>

my idea it´s hide elements classes called table_scale , table_scale_end , example fot other reolutions can display clases , col see 1 one under other , works , problem it´s full screen show example 1 col , idea it´s use code media queries , turn on or turn off tags other resolutions , no works

for full resolution : http://jsfiddle.net/kpwalat8/ ( here must show cols 1 beside other not show)

for example no full resolution activate classes , works : http://jsfiddle.net/r1t4qybs/

the best regards

i adjusted html use table, tr , td tags based on designations of each column:

<table class="table_cols">     <tr>         <td class="td_cols">col 1</td>         <td class="td_cols table_scale">col 2</td>         <td class="td_cols table_scale">col 3</td>         <td class="td_cols table_scale">col 4</td>     </tr> </table> 

here updated css:

.table_cols {     width:100%;     height:200px;     margin:auto; }  .td_cols {     width:20%;     height:200px;     text-align:center;     background-color:green; }  @media (max-width: 600px) {   //set maximum width @ want show 4 columns - less hide columns 2, 3 , 4     .table_scale {         display:none;     } } 

jsfiddle demo (try resizing result screen see media query in action)