0

html コード:

<table class='cTable'><th>Title</th>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS コード:

.cTable tr {
    display: none;
}

このことは、行だけでなく頭も隠します。それを回避する方法はありますか？

display: none;可能であれば、各 tr 要素にa を配置したくありません。

jsfiddle:

http://jsfiddle.net/vT4r9/1/

私はこれを試しました：

html

<table class='cTable'><th class='cTableTH'>Title</th>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS:

.cTable tr {
    display: none;
}

.cTableTH {
    display: block;
}

しかし、どちらも機能しません。

http://jsfiddle.net/vT4r9/4/

4

6 に答える 6

2

HTML が間違っています。このように変更します。

HTML

<table class='cTable'>
<tr><th class='cTableTH'>Title</th></tr>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS

.cTable tr {
    display: none;
}

.cTable tr:first-child {
    display: table-row;
}

説明

<th>中に直接与えるの<table>は間違っています。あげても入っ<tr>て表示します。<th>隠蔽された内部に与えるものは何でも<tr>機能しません。

フィドル: http://jsfiddle.net/vT4r9/11/

于 2013-01-16T11:18:03.080 に答える
1

次のようにCSSをカバーthして変更する必要がありますtr

    .cTable tr td{ display: none; }

デモ

于 2013-01-16T11:18:31.803 に答える
1

:first-childを試すことができます

css:

  cTable tr:not(:first-child){
           display:none;
  }

HTML :

 <table class='cTable'><tr><th class='cTableTH'>Title</th></tr>
 <tr><td>Item1</td></tr>
 <tr><td>Item2</td></tr>
 <tr><td>Item3</td></tr>
 </table>

ここで動作しているようです: http://jsfiddle.net/vT4r9/14/

于 2013-01-16T11:19:24.313 に答える
1

正しくないのは HTML です。テーブルを定義する正しい方法は、 と を使用すること<thead>です<tbody>。これを試して：

<table class='cTable'>
  <thead>Title</thead>
  <tbody>
    <tr><td>Item1</td></tr>
    <tr><td>Item2</td></tr>
    <tr><td>Item3</td></tr>
  </tbody>
</table>

このCSSで：

.cTable tbody tr {
  display:none;
}
于 2013-01-16T11:24:37.037 に答える
0

これはどうですか？

.cTable td {
  display: none;
}

行の代わりにセルを非表示にするだけで十分です。また、すでに他の人が指摘しているようthに、を aでラップする必要があります。tr

于 2013-01-16T11:20:01.413 に答える
0

次のように列を非表示にできると思います。

<style>
 .cTable td {
    display: none;
 }
 </style>
于 2013-01-16T11:24:46.397 に答える