隐藏表TR但保持TH显示

Question

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;
}

这件事，不仅隐藏了行，也隐藏了头部。有什么方法可以避免吗？

我希望在可能的情况下不要在每个tr元素上放置display: none; 。

的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/

Answer 1

你的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/

Answer 2

您应该使用th覆盖tr并更改

之类的CSS

    .cTable tr td{ display: none; }    

<强> DEMO

Answer 3

您可以尝试使用: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/

Answer 4

这是不正确的HTML。定义表格的correct way正在使用<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;
}

Answer 5

这个怎么样？

.cTable td {
  display: none;
}

隐藏单元格而不是行应该就足够了。此外，您应该将th包装在tr中，如其他人已经指出的那样。

Answer 6

我认为您可以隐藏这样的列：

<style>
 .cTable td {
    display: none;
 }
 </style>