使用CSS隐藏项目

Question

What's wrong with my CSS code? 我的CSS代码有什么问题？ I want to hide the Timestamp column but it's not working? 我想隐藏“时间戳记”列，但是它不起作用？ I do not have access to anything in the body, as it is automatically generated, hence i'm trying to use css. 我无法访问体内的任何东西，因为它是自动生成的，因此我正在尝试使用CSS。

http://snipt.org/Asge0 http://snipt.org/Asge0

Code: 码：

<html><head>
<meta http-EQUIV="refresh" content="5">

<style TYPE="text/css">
th, td {
padding-RIGHT: 50px;
text-ALIGN: CENTER;
}

.tb  {
CLEAR: both;
}

.tsp {
display: none;
}
</style>

</head>
<body>
<div CLASS="tb"><!--  channeltable schedule="" --><table class="jdt" cellspacing="0">
<colgroup>
    <col CLASS="sid"/>
    <col CLASS="sun"/>
    <col CLASS="chv"/>
    <col CLASS="dfu"/>
    <col CLASS="tsp"/>
</colgroup>
<thead>
    <tr>
        <th>Schedule</th>
        <th>Name</th>
        <th>Value</th>
        <th>Units</th>
        <th>Timestamp</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>A</td>
        <td>Stream Level</td>
        <td>---</td>
        <td>metres</td>
        <td>2013/06/18  18:10:01.948</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Stream Flow</td>
        <td>---</td>
        <td>cumecs</td>
        <td>2013/06/18  18:10:01.989</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Tank Pressure</td>
        <td>---</td>
        <td>PSI</td>
        <td>2013/06/18  18:10:02.029</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Bubbler Voltage</td>
        <td>---</td>
        <td>V</td>
        <td>2013/06/18  18:10:02.068</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Water Temperature</td>
        <td>---</td>
        <td>Deg</td>
        <td>2013/06/18  18:10:03.176</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Conductivity</td>
        <td>---</td>
        <td>uS/cm</td>
        <td>2013/06/18  18:10:03.244</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Turbidity</td>
        <td>---</td>
        <td>NTU</td>
        <td>2013/06/18  18:10:03.284</td>
    </tr>
    <tr>
        <td>A</td>
        <td>pH</td>
        <td>OverRange</td>
        <td>pH units</td>
        <td>2013/06/18  18:10:03.322</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Ext. Battery Voltage</td>
        <td>18.996444</td>
        <td>V</td>
        <td>2013/06/18  18:10:03.323</td>
    </tr>
</tbody>

Answer 1

EDIT: 编辑：
Try this javascript hack: 试试这个javascript hack：
(as it is it just reads first <tbody> , if you have more than one in each page you can add another for loop like in myrows ) （因为它只是读取第一个<tbody> ，如果每个页面中都有多个，则可以在myrows添加另一个for循环）

var tbody = [];
var tbody = document.getElementsByTagName("tbody");
var myrows = [];
var myrows = tbody[0].getElementsByTagName("tr");
for (var i in myrows) {
var mycells = [];
var mycells = myrows[i].getElementsByTagName("td");
    var lastcell = mycells[mycells.length - 1];
    lastcell.style.color = "blue";
}

First answer: 第一个答案：

Try with :last-child . 尝试:last-child 。

Something like td:last-child {display:none;} 类似于td:last-child {display:none;}

Answer 2

You have to set each <td> tag which you like to hide to <td class="tsp"> colgroup does not support the display attribute. 您必须将每个要隐藏的<td>标记设置为<td class="tsp"> colgroup不支持display属性。

supported attributes are: 支持的属性是：

align, char, charoff, valign, width and span align，char，charoff，valign，width和span

some attributes are not supported in HTML5. HTML5不支持某些属性。

http://www.w3schools.com/tags/tag_colgroup.asp http://www.w3schools.com/tags/tag_colgroup.asp

Edit: as you mentioned you can not access table body try this to hide the 5th column in table: 编辑：正如您提到的，您无法访问表主体，请尝试隐藏表中的第5列：

tr td:nth-child(5), tr th:nth-child(5) {
    display: none;
}
tr td + td + td + td + td {display:none } /*IE 8*/

As fallback for older browsers you also can try just to set width: 0px for colgroup 作为旧版浏览器的备用，您还可以尝试设置width: 0px colgroup为width: 0px

Answer 3

You need to apply the class to all corresponding td's and th's as well 您还需要将类应用于所有对应的td和th

  <thead>
    <tr>
        <th>Schedule</th>
        <th>Name</th>
        <th>Value</th>
        <th>Units</th>
        <th CLASS="tsp">Timestamp</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>A</td>
        <td>Stream Level</td>
        <td>---</td>
        <td>metres</td>
        <td CLASS="tsp">2013/06/18  18:10:01.948</td>
    </tr>

...etc ...等等

Answer 4

You can use the pseudo class :nth-child(n) on your table: 您可以在表上使用伪类:nth-child(n) ：

.jdt tr th:nth-child(5), .jdt tr td:nth-child(5) {
    display: none;
}

This will hide the 5'th td, th elements in the table. 这将隐藏表中的td, th元素。

For more special selectors see this article: 有关更多特殊选择器，请参见本文：

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

使用CSS隐藏项目

问题描述

4 个解决方案

解决方案1
2 2013-06-18 08:30:08

解决方案2
1 2013-06-18 08:25:49

解决方案3
0 2013-06-18 08:27:53

解决方案4
0 2013-06-18 08:33:18

使用CSS隐藏项目

问题描述

4 个解决方案

解决方案1 2 2013-06-18 08:30:08

解决方案2 1 2013-06-18 08:25:49

解决方案3 0 2013-06-18 08:27:53

解决方案4 0 2013-06-18 08:33:18

解决方案1
2 2013-06-18 08:30:08

解决方案2
1 2013-06-18 08:25:49

解决方案3
0 2013-06-18 08:27:53

解决方案4
0 2013-06-18 08:33:18