特定のテーブルクラスに対応するコードを設定するにはどうすればよいですか？

Question

私は、特定のテーブルクラスファイルのための以下に述べた応答テーブルコードを設定したいと思います。どうやってするの。私はテーブルクラスとしてCSSTableGeneratorを使用しています。私はこのコードを使用する場合、通常のテーブルにも影響します。 CSSTableGeneratorクラスファイル用にのみ設定したいと思います。この特定のテーブルには厄介な を取得する前に私に

/* 
    Max width before this PARTICULAR table gets nasty 
    This query will take effect for any screen smaller than 760px 
    and also iPads specifically. 
    */ 
    @media 
    only screen and (max-width: 760px), 
    (min-device-width: 768px) and (max-device-width: 1024px) { 

     /* Force table to not be like tables anymore */ 
     table, thead, tbody, th, td, tr { 
      display: block; 
     } 

     /* Hide table headers (but not display: none;, for accessibility) */ 
     thead tr { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
     } 

     tr { border: 1px solid #ccc; } 

     td { 
      /* Behave like a "row" */ 
      border: none; 
      border-bottom: 1px solid #eee; 
      position: relative; 
      padding-left: 50%; 
     } 

     td:before { 
      /* Now like a table header */ 
      position: absolute; 
      /* Top/left values mimic padding */ 
      top: 6px; 
      left: 6px; 
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap; 
     }  

    } 

    /* Smartphones (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
     body { 
      padding: 0; 
      margin: 0; 
      width: 320px; } 
     } 

    /* iPads (portrait and landscape) ----------- */ 
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
     body { 
      //width: 495px; 
     } 
    } 

Answer 1

/* 最大幅をガイドしてください。このクエリは760px よりも小さい任意の画面のために有効になり、また、特にiPadのだろう。 */ @media のみ画面（最大幅：760px）、 （MIN-デバイス幅：768px）および（MAX-デバイス幅：1024px）{

/* Force table to not be like tables anymore */ 
    table.CSSTableGenerator,.CSSTableGenerator thead,.CSSTableGenerator tbody,.CSSTableGenerator th,.CSSTableGenerator td,.CSSTableGenerator tr { 
     display: block; 
    } 

    /* Hide table headers (but not display: none;, for accessibility) */ 
    .CSSTableGenerator thead tr { 
     position: absolute; 
     top: -9999px; 
     left: -9999px; 
    } 

    .CSSTableGenerator tr { border: 1px solid #ccc; } 

    .CSSTableGenerator td { 
     /* Behave like a "row" */ 
     border: none; 
     border-bottom: 1px solid #eee; 
     position: relative; 
     padding-left: 50%; 
    } 

    .CSSTableGenerator td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     width: 45%; 
     padding-right: 10px; 
     white-space: nowrap; 
    }  

} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    body { 
     padding: 0; 
     margin: 0; 
     width: 320px; } 
    } 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    body { 
     //width: 495px; 
    } 
} 

私はこのすべき期待ヘルプを使用して、テーブルに使用しているクラス名を正確に追加してください。あなたの場合は、一般的なタグにプロパティを追加するので、すべてのテーブルに影響します。