web-dev-qa-db-ja.com

テーブルの複数の列を非表示にするためのCSS

以下に示すようなSharePointサイトのテーブルがあります。テーブルは動的に生成されるため変更できませんが、外部CSSを追加してスタイルを上書きできます。 2列目のみを表示し、1列目、3列目、4列目を非表示にする必要があります。

最初の列を非表示にする疑似クラスは

table#student tr td:first-child { display: none; }

3番目と4番目の列を非表示にする疑似クラスまたはその他のトリックで私を助けてください。

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>
htmlcsshtml-tablehidepseudo-class
13
Merin Nakarmi

CSS3：

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

使用する nth-childセレクターを使用して、2番目の非表示を解除します<td>すべての行の2番目の列を効果的に示しています。

19
AlienHoboken

CSS3 ：nth-​​child（）セレクターを使用できます

td:nth-child(3), td:nth-child(4) {
  display: none
}

jsfiddleここ

16
Aurélien Gasser

誰もが一般的な兄弟セレクターについて言及していないことに驚いています。 （詳細はこちら） 2列目のみを表示する必要がある場合は、_display: none;_スタイルを最初のセルと2番目以降のすべてのセルに適用します。

_table#student td:first-child,
table#student td:nth-child(2) ~ td {
  display: none;
}_
_<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>_

何らかの理由でIE7とIE8をサポートする必要がある場合は、:nth-child()セレクターを隣接する兄弟セレクターに置き換えることができます。

_table#student td:first-child,
table#student td + td ~ td {
  display: none;
}
_
3
stealththeninja

どうぞ。

CSS：

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

WORKING DEMO

0
Nitesh