7

私は一般的なテーブルを持っており、このテーブルを多目的に使用したいと考えています。例 1. 従業員の詳細: Eno eFname ELName EDept ESalary Elocation。上記では、ELname と Elocation を非表示にしたいと考えています。現在、CSS クラスを使用して ELName と ELocation を非表示にしています。

例 2: 学生の詳細 Sno SFname SLname SDegree SLocation. モバイル モードやポートレート モードなど、一部のデバイスで一部の列を非表示にしたい。現在、特定の列を非表示にするために css クラスを使用していますが、テーブルはすべての一般的なものです。

.hidden-phone や .hidden-tablet などのクラスを表のセルに追加すると、それらが視覚的に壊れることに気付きました。これは、セルがブロックとして表示されようとするためです。

.hidden-phone、.hidden-portrait などで使用する必要があるプロパティを教えてください。メディア クエリで tr td:nth-child(4),tr td:nth-child(3) を使用して列を非表示にしたくない。

4

1 に答える 1

8

css でメディア クエリを使用します。ここに 4 つのブレークポイント css クエリがあります。

これがjsfiddle http://jsfiddle.net/yeyene/MfKzU/1/です

HTML

<table id="myTable" width="100%" border="1">
  <tr>
    <td>Nothing change</th>
    <td class="col_1">Hide data < 959px</td>
    <td class="col_2">Hide data < 767px</td>
    <td class="col_3">Hide data < 599px</td>
    <td class="col_4">Hide data < 479px</td>
  </tr>
  <tr>
    <td>Left alone</td>
    <td class="col_1">aaa</td>
    <td class="col_2">bbb</td>
    <td class="col_3">ccc</td>
    <td class="col_4">ddd</td>
  </tr>
  <tr>
    <td>Left alone</td>
    <td class="col_1">aaa</td>
    <td class="col_2">bbb</td>
    <td class="col_3">ccc</td>
    <td class="col_4">ddd</td>
  </tr>
</table>

CSS

html, body{
    margin:0;
    padding:0;  
}
#myTable {
    float:left;
    border:1px solid #dfdfdf;
    border-collapse:collapse;   
    width:100%;
    font-size:12px;
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media all and (min-width: 768px) and (max-width: 959px) {
    td.col_1{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;       
    } 
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 600px */
@media all and (min-width: 600px) and (max-width: 767px) {
    td.col_2{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
    } 
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media all and (min-width: 480px) and (max-width: 599px) {
    td.col_3{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
    } 
}
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media all and (max-width: 479px) {
    td.col_4{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
    }    
}
于 2013-06-10T09:28:56.213 に答える