Question

我有4种不同的表格样式如下：

table {
    margin: 10px;
    border: 1px solid rgb(166, 201, 226);
}

table th {
    background-color:navy;
    padding: 4px, 5px;
    border: 1px solid rgb(166, 201, 226);
    vertical-align: middle;
}

table td {
    padding: 4px, 5px;
    border: 1px solid rgb(166, 201, 226);
    vertical-align: middle;
}


/* Invisible - no borders, no table margin */
table.invisible {
    margin: 0px;
    border: 0px;
}

table.invisible td {
    border: 0px;
    vertical-align: top;
}

/* Invisible: Middle Align */
table.invisible-middlealign {
    margin: 0px;
    border: 0px;
}

table.invisible-middlealign td {
    border: 0px;
}

/* Invisible: Middle Align - No Pad */
table.invisible-middlealignnopad {
    margin: 0px;
    border: 0px;
}

table.invisible-middlealignnopad td {
    border: 0px;
    padding: 0px;
}

/* Invisible: No Pad */
table.invisible-nopadding {
    border: 0px;
    margin: 0px;
}

table.invisible-nopadding td {
    border: 0px;
    padding: 0px;
    vertical-align:top;
}

有时我发现例如我在'invisible-middlealignnopad'表中需要一个'隐形'表，但在另一个场合，'invisible-middlealignnopad'表需要在'隐形'表中。鉴于我可以拥有的不同组合，我唯一能满足这一要求的方法是做类似以下的事情：

table.invisible td table.invisible-middlealignnopad td {
    border: 0px;
    padding: 0px;
}

然后我必须为所有组合复制这个。

我猜测必须有更好/标准的方法来处理这个要求。感谢任何建议：）

谢谢，尼尔

Answer 1

你能简单地创建一个你添加到HTML中的类来控制这些需要被“覆盖”的东西吗？例如......

CSS

将上面的CSS更改为以下内容...如果我正确地关注您的CSS，您需要考虑表格没有边距和没有边框的时间，表格TD应该没有填充且没有边框，以及当td应该是aligntop或对齐中间。在下面的CSS中，您可以通过适当地向表中添加类来控制表边距和边框，td的填充和边框以及td的垂直对齐。

基本上......您正在使用HTML类来覆盖事物，而不是使用复杂的CSS选择器来覆盖。覆盖更精细，并由您的HTML控制。

table {
    margin: 10px;
    border: 1px solid rgb(166, 201, 226);
}

table th {
    background-color:navy;
    padding: 4px, 5px;
    border: 1px solid rgb(166, 201, 226);
    vertical-align: middle;
}

table td {
    padding: 4px, 5px;
    border: 1px solid rgb(166, 201, 226);
    vertical-align: middle;
}

table.no-margin {
    margin: 0px;
    border: 0px;
}

table.no-padding td {
    padding: 0px;
    border: 0px;
}

table.align-top td {
    vertical-align: top;
}

HTML

<table>
   <td>
      <table class="no-pad-border">
         <td>
            Something
         </td>
      </table>
   </td>
</table>

如何在多个表格样式彼此出现时创建样式表？

1 个答案:

CSS

HTML