包含另一个表的td的不同CSS

Question

我在html表格中一个html表。我想为包含子表的特定td应用不同的css样式（填充和边距） 。

除了包含子表的那个之外，我想要所有td的padding: 5px;。由于表是动态生成的，我无法明确地将样式赋予td。有时父表会有子表，有时不会。我已尝试过与jQuery相同但无法解决问题。

父表是作为GridView（asp.net）的一部分生成的，我正在使用EmptyDataTemplate创建一个子表，类似于GridView，如果没有数据则插入值。

请帮我摆脱这个问题。

Answer 1

See this example I made：

td table {
    margin: -5px;
}

诀窍是给第二个表一个负余量来抵消周围的填充。

Answer 2

你可以在jquery中做这样的事情：

$("td").not($(this).find("table")).css("padding","5px");

这将为所有没有表有子节点的td添加填充。您也可以通过添加类而不是内联样式来完成此操作。

Answer 3

您可能需要查看css选择器link

虽然你描述的不是CSS的一部分但我想link

如果您可以在表td上使用带有子表子的JQuery：$('table td:has(table.sub)').addClass('has_sub');

然后设置td.has_sub

的样式

Answer 4

使用以下内容进行定位

CSS

 .the-class {
enter code here

}

<强>的jQuery

$("td:has(table)").addClass("the-class");

注意：我更喜欢 addClass 方法，因为 .css 会在您的html中添加内联css。

Answer 5

通常，您要查找的选择器是“＆gt;”它指向一个子元素，但不是孙子元素。 例如：

parent-selector > direct-child-selector {
}

对于表格，虽然它有点棘手，因为html会自动插入tbody所以你需要的是：

table-selector > tbody > tr > td {
}