CSS只顯示媒體中的一列表格

Question

我有一個正常的HTML表格。而且我希望當我在手機中時，除了第二列外，所有的柱子都消失了。我怎樣才能做到這一點？

我看到了負責任的表格，他們將所有列合併爲一個，但我希望其他列消失。由於

Answer 1

查看全屏和調整窗口的大小...

這將隱藏所有td的，除了那些他們的父母的第二個孩子（即：第2列）：

@media (max-width: 600px) { 
 
    td:not(:nth-child(2)) { 
 
    display: none; 
 
    } 
 
}

<table> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    <td>Column 3</td> 
 
    <td>Column 4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    <td>Column 3</td> 
 
    <td>Column 4</td> 
 
    </tr> 
 
</table>

Answer 2

，您應該使用Media queries不同樣式應用到要禁用當分辨率低於一定點小柱

例

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 

    .specialColumn { 
     display:none; 

} 

Answer 3

媒體查詢會爲你做到這一點：

HTML：

<table border="1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    </tr> 
</table> 

CSS：

@media (max-width: 479px) { 
    table tr td:nth-child(1), table tr td:nth-child(3) { 
    display: none; 
    } 
} 

這裏有一個小提琴，我已經使用了第n個孩子選舉人只選擇第一列和第三列：https://jsfiddle.net/pqp11dqe/

Answer 4

嘗試使用媒體查詢。 事情是這樣的：

@media only screen and (max-width: 500px /*max width of smaller screen*/) { 
    .classOfColumnsToHide { 
     display:none; 
    } 
} 

Answer 5

如果你將要制定和落實關於你想看看bootstrap css它將幫助您極大，並且有很多的手動CSS編碼的做掉手機的工作。它也將解決您當前的問題，並且從長遠來看，您可能最終會喜歡使用它。