它应该很简单,但我无法弄清楚.
我有这样一张桌子:
<table class="category_table">
<tr><td> blabla 1</td><td> blabla 2 </td></tr>
<tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>
Run Code Online (Sandbox Code Playgroud)
我想制作td第一tr行的标签vertical-align.但不是第二排.
.category_table td{
vertical-align:top;
}
Run Code Online (Sandbox Code Playgroud) IE9和Chrome14都记录TBODY为tagName内部元素<table>
HTML5规范<table>清楚地说明:
后跟零个或多个tbody元素或一个或多个tr元素
此外.HTML5规范<tr>清楚地说明:
作为表元素的子元素,在任何标题,colgroup和thead元素之后,但仅当没有tbody元素是table元素的子元素时.
为什么浏览器会破坏我的DOM并注入<tbody>时间
"向后兼容性"的答案绝对没有意义,因为我特意选择了HTML5文档类型.
我正在尝试做一些非常简单的事情 - 选择标签的直接后代.
我使用的CSS如下:
table.data > tr { background-color: red; }
Run Code Online (Sandbox Code Playgroud)
我的HTML看起来像这样:
<table class="data">
<tr>
...
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
但没有红色背景即将到来!如果我从CSS中删除">"字符,它就可以了!我在Firefox,IE 8,Chrome和Safari中尝试了这一点,并且所有浏览器都做了完全相同的事情.
希望有这么多令人沮丧的时间后,有人可以帮助我!我知道我做的事非常愚蠢,但我无法弄清楚它是什么.
HTML代码:
<table id='table'>
<tr>
<td>..</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
使用jquery的js代码:
var l1 = $('#table > tr').length;
var l2 = $('#table tr').length;
alert(l1+','+l2);?
Run Code Online (Sandbox Code Playgroud)
结果:
0,1
Run Code Online (Sandbox Code Playgroud)
为什么第一个#table > tr得到0?
您可以从这里看到现场演示:http://jsfiddle.net/Freewind/PmsFQ/
我需要一个 css 选择器<tr>作为<table>.
我在互联网上搜索并得到了一些选择器,例如tr:first-child table *:first-child tr:first-child, table tr:first-child. 但它们不适用于我的情况......
这是一段需要处理的 HTML 代码:
<table>
<thead>
<tr><th>you should chose this row</th></tr>
<tr><th>not this one</th></tr>
</thead>
<tbody>
<tr><td>not this one</td></tr>
</tbody>
</table>
<table>
<colgroup>
<col></col>
</colgroup>
<thead>
<tr><th>you should chose this row</th></tr>
<tr><th>not this one</th></tr>
</thead>
<tbody>
<tr><td>not this line</td></tr>
</tbody>
</table>
<table>
<colgroup>
<col></col>
</colgroup>
<tbody>
<tr><td>you should chose this row</td></tr>
<tr><th>not this one</th></tr>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
(更喜欢没有javascript的解决方案)
我正在尝试用css3设计一个棋盘,但看起来我的选择器是错误的.这是我的JsFiddle
那么为什么我不能在线条和单元格周围看到设计的测试蓝色和红色边框?
HTML
<body>
My chess board
<table class="chess_board">
<tr class="chess_line">
<td class="chess_cell black_cell white_piece"><span>♔</span></td>
<td class="chess_cell white_cell white_piece"><span>♕</span></td>
<td class="chess_cell black_cell white_piece"><span>♖</span></td>
<td class="chess_cell white_cell white_piece"><span>♗</span> </td>
</tr>
<tr class="chess_line">
<td class="chess_cell white_cell"><span>♜</span></td>
<td class="chess_cell black_cell"><span>♝</span></td>
<td class="chess_cell white_cell"><span>♞</span></td>
<td class="chess_cell black_cell"><span>♟</span></td>
</tr>
</table>
My another chess board ... to be drawn !
</body>
Run Code Online (Sandbox Code Playgroud)
CSS
table.chess_board > tr.chess_line {
background-color: blue;
}
table.chess_board > tr.chess_line > td.chess_cell {
border: 2px solid red;
/*
font-family: serif;
font-size: 2.3em;
width: …Run Code Online (Sandbox Code Playgroud) 我尝试使用以下代码将颜色应用于表的行.它不起作用,但我不明白为什么.有人可以解释为什么或指出我正确的方向吗?
HTML:
<table id="tblSample" border="1" cellpadding="0" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
JQuery的:
$("#tblSample > tr").css("background-color", "gray");
Run Code Online (Sandbox Code Playgroud) 当我们升级到jQuery 1.7.1时,此代码停止工作. $('table.className > tr').length正在返回0.你能告诉我如何纠正它吗?
.NET代码(执行jQuery代码):
public static long GetTableRowCountByCssClass(IWebDriver driver, string cssClass, int exclusionRowCount)
{
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
long count = (long)js.ExecuteScript("return $('table." + cssClass + " > tr').length");
if (count != 0)
{
count = count - exclusionRowCount;
}
return count;
}
Run Code Online (Sandbox Code Playgroud)
HTML代码:
<!-- Products -->
<table class="cart" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th class="remove">Delete</th>
<th class="prod-desc">Product Description</th>
<th class="ships_w">Ships Within</th>
<th class="price">Unit Price</th>
<th> </th>
<th class="quantity">Qty.</th>
<th class="totals">Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td …Run Code Online (Sandbox Code Playgroud) 我有一个表,其第二行,第一列包含另一个表.我想为父表行设置背景颜色,但不应该应用于子表行.为此,我正在尝试使用CSS Child-selector(>).但它没有工作......任何人都可以告诉我原因.
这是我的一段代码:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style>
table.tab > tr{
background:red;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<td>asdf</td><td>afda</td><td>asdfdsa</td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td>afds</td><td>Trkaladf</td><td>inner Tab</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)