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 的类隐藏元素，例如，在其他重新解析中，我可以显示此clases，col看到一对一下另一个和这个工作，它的全屏幕问题只显示例如一个col，它的想法是使用此代码与媒体查询和打开或关闭标签与其他分辨率，但没有得到工作

要获得完整分辨率：http://jsfiddle.net/kpwaLat8/ （这里必须将cols显示在另一个旁边，但不显示）

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

最好的问候

Answer 1

我调整了您的HTML，以根据您对每列的名称正确使用>> my_list = [[1, 2, 3], [4, 5, 6]] >> my_list[1][1] 5 >> my_collect = MyJavaCollection(my_list) >> my_collect[[1, 1]] 5 >> my_collect[[1, 1]] += 5 >> my_collect[[1, 1]] 10，table和tr代码：

td

这是更新的CSS：

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

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

Answer 2

您还可以参考以下链接： -

http://cssmediaqueries.com/what-are-css-media-queries.html

http://css-tricks.com/css-media-queries/

使用这些代码代替您的代码：

      @media only screen and (min-width : 320px) and (max-width : 480px) {

            .table_scale
            {
             display:none;
            }

           .table_scale_end
            {
             display:none;
            }
        }

        /* iPads (portrait and landscape) ----------- */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .table_scale
            {
              display:block;
            }

            .table_scale_end
            {
              display:block;
            }
        }

用css隐藏表中的元素tr

2 个答案: