html - 为两个表分配单独的 css 样式

Question

为什么当我将一种样式应用到一个表时它会影响另一个表，即使我已经为它们分配了单独的类。表二被表二填充推低。看看我创建的这个演示。我怎样才能避免这种情况？

<table id="one">
    <tr>
      <td>Hello</td>
    </tr>
  </table>

  <table id="two">
    <tr>
      <td>Goodbye</td>
    </tr>
  </table>

CSS:

table{
  display: inline-block;
}

#one{
  background-color: blue;
  padding-top: 50px;
}

#two{
  background-color: orange;
}

https://jsfiddle.net/b7qdcub1/

Answer 1

您可以对表 Jsfiddle 使用垂直对齐

table{
 display: inline-block;
 vertical-align:top;
}
#one{
  background-color: blue;
  padding-top: 50px;
}

#two{
  background-color: orange; 
}

  

  <table id="one">
<tr>
  <td>Hello</td>
</tr>
  </table>
  
  <table id="two">
<tr>
  <td>Goodbye</td>
</tr>
  </table>