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

你应该覆盖th并tr改变css

    .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>and <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 回答