css - 停止表继承

Question

我想弄清楚如何在另一个表中包含一个表，这样子表就不会继承父表的样式...

如果我有一张 table

<table align='center' class='tab1' ....
<tr> <td> ...<table class='tab2' ....

.tab table, .tab th, .tab tr, .tab td { 
padding: 0;
margin:0;
vertical-align: top;
font-size: 11px;
line-height: 15px;
padding-top: 5px;
padding-bottom: 5px;
}

.tab table {
border-collapse: collapse;  
font-size: 11px;
border: 1px solid #999;
table-layout: fixed;
}

---

我想我应该在继续寻求帮助之前告诉您我的 table 究竟列出了什么。我的表格列出了迭代到最后的信息。对于每一行，都有一个隐藏的 div，允许在单击相关行的按钮时查看信息。这是我想使用另一个表在我的两个父表中放置一个 3 列表的地方。考虑之后，我宁愿没有嵌套表。现在你说还有另一种更好的方法。我认为最好对行中的特定元素使用 div 和位置属性。

我的输出示例如下所示:

name - title                                     view edit
email - country
----hidden info-----
address ......              alternate email                 notes...
............                other info.....
.............               other info .....

Answer 1

您要查找的选择器如下所示:

table#mytable > tr > td {
  ...your properties
}

V 形 (>) 确保只有直系子代而非孙代才能分配属性。这意味着不会选择子表的 tr 和 td。

但是，我提醒您不要使用表格进行定位...视屏幕阅读器而定，视障用户可能会听到各种奇怪的输出。您可能需要考虑他们的经验。