如何删除表格列与CSS

Question

我有一个表，我试图使移动友好，所以当屏幕是一定的宽度我删除不必要的列。下面是该CSS：

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

上面的代码确实与#urlCell ID删除单元格的工作，但剩余的细胞不填写该表。相反，它们的宽度保持好像还有另一列在那里，也为缺少的单元格边框依然是：

Answer 1

我发现了这个问题。导致问题的每行之间都有一个隐藏的行。随着柱子的拆卸将其固定。

Answer 2

您可以应用同一类的相关th S和td秒。下面

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

表是由设计并不意味着用于隐藏指定的列。我的建议是使用flex，一个css技术来解决我们所有的问题，真的：D