Question

我的CSS代码有什么问题？我想隐藏Timestamp列，但它不起作用？我无法访问正文中的任何内容，因为它是自动生成的，因此我正在尝试使用css。

代码：

<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

修改
试试这个javascript hack：
（因为它只是首先读取<tbody>，如果你在每个页面中有多个，你可以添加另一个for循环，如myrows）

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

第一个回答：

尝试使用:last-child。

喜欢的东西 td:last-child {display:none;}

Answer 2

您必须将要隐藏的每个<td>标记设置为<td class="tsp"> colgroup不支持display属性。

支持的属性是：

对齐，char，charoff，valign，width和span

HTML5中不支持某些属性。

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

编辑：正如您所提到的，您无法访问表体，请尝试将其隐藏在表格中的第5列：

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

作为旧版浏览器的后备版，您也可以尝试为{colgroup

设置width: 0px

Answer 3

您需要将该类应用于所有相应的td，以及

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

...等

Answer 4

您可以在桌面上使用伪类:nth-child(n)：

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

这将隐藏表格中的第5个td, th元素。

有关更多特殊选择器，请参阅此文章：

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

使用CSS隐藏项目

4 个答案: