0

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

http://snipt.org/Asge0

代码：

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

4

4 回答 4

2

编辑：
试试这个 javascript hack：（
因为它只是先读取<tbody>，如果每个页面中有多个，则可以添加另一个 for 循环，如 in 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;}

于 2013-06-18T08:30:08.390 回答
1

You have to set each <td> tag which you like to hide to <td class="tsp"> colgroup does not support the display attribute.

supported attributes are:

align, char, charoff, valign, width and span

some attributes are not supported in HTML5.

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:

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

于 2013-06-18T08:25:49.240 回答
0

:nth-child(n)你可以在你的桌子上使用伪类：

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

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

更多特殊选择器见这篇文章：

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

于 2013-06-18T08:33:18.497 回答
0

您还需要将该类应用于所有相应的 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

于 2013-06-18T08:27:53.207 回答