CSSで表の列を削除する方法

Question

私はモバイルフレンドリーにしようとしているテーブルを持っていますので、画面が一定の幅である場合は不要な列を削除します。ここではそのためのCSSは次のとおりです。

@media (max-width: 640px) 
{ 
    .urlCell 
    { 
     display: none; 
    } 
} 

上記のコードは、#urlCell IDで細胞を除去する仕事をしていませんが、残りの細胞は、表を記入しません。

Answer 1

私は問題を発見しました。問題の原因となっていた各行には、隠れた行があります。列と共にそれを取り除いて固定しました。

Answer 2

あなたは、関連するth sおよびtd秒に同じクラスを適用できますが別の列がまだそこにある、とも欠損セルの境界線が残っているかのようにする代わりに、その幅が残っています。あなたが動作するはず非表示にしたいすべてのセルに表示noneクラスを追加

th, td { 
 
    width: 20%; 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
} 
 

 
@media (max-width: 640px) 
 
{ 
 
    .three 
 
    { 
 
     display: none; 
 
    } 
 
}

<table> 
 
    <tr> 
 
    <th class="one">One</th> 
 
    <th class="two">Two</th> 
 
    <th class="three">Three</th> 
 
    <th class="four">Four</th> 
 
    <th class="five">Five</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="one">1</td> 
 
    <td class="two">2</td> 
 
    <td class="three">3</td> 
 
    <td class="four">4</td> 
 
    <td class="five">5</td> 
 
    </tr> 
 
</table>

Answer 3

以下

参照のコードサンプル。

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th class="urlCell">Last Name</th> 
      <th>Username</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th scope="row">1</th> 
      <td>Mark</td> 
      <td class="urlCell">Otto</td> 
      <td>@mdo</td> 
     </tr> 
     <tr> 
      <th scope="row">2</th> 
      <td>Jacob</td> 
      <td class="urlCell">Thornton</td> 
      <td>@fat</td> 
     </tr> 
     <tr> 
      <th scope="row">3</th> 
      <td>Larry</td> 
      <td class="urlCell">the Bird</td> 
      <td>@twitter</td> 
     </tr> 
    </tbody> 
</table> 


@media (max-width: 640px) 
{ 
    .urlCell 
    { 
     display: none; 
    } 
} 

https://jsfiddle.net/ccnxa7b6/

Answer 4

テーブルは、設計で指定された列を隠すためのものではありません。私のアドバイスは、すべての私たちの問題を解決するために作られたCSS技術、フレックスを使用することです：D