html - 使用 css 隐藏表中的元素 tr

Question

我尝试使用 css 隐藏表格内的元素，问题没有真正解决并隐藏元素，我的代码是下一个:

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

我的想法是用名为 table_scale 和 table_scale_end 的类隐藏元素，例如，对于其他解决方案，我可以显示这些类，并且 col 在 to 下看到一对一另一个和这个有效，全屏的问题只显示例如一个列，它的想法是将此代码与媒体查询一起使用并打开或关闭具有其他分辨率的标签，但没有得到工作

全分辨率:http://jsfiddle.net/kpwaLat8/ (这里必须显示cols 一个在另一个旁边但不显示)

例如，没有完整的分辨率激活类和作品:http://jsfiddle.net/r1t4qybs/

最好的问候

Answer 1

我根据您对每一列的指定调整了您的 HTML 以正确使用 table、tr 和 td 标签:

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

这是更新后的 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 the maximum width at which you want to show all 4 columns - anything less than that will hide columns 2, 3 and 4
    .table_scale {
        display:none;
    }
}

JSFiddle DEMO (尝试调整结果屏幕的大小以查看正在运行的媒体查询)