Question

为什么当我将一个样式应用于一个表时它会影响另一个表，即使我已经为它们分配了不同的类。表二正在被表格twos填充下推。看看我创建的这个演示。我怎么能避免这个？

<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>

Answer 2

您必须将这些样式添加到表格中：

table {
   display: block;
   float: left;
}

这是一个更新的小提琴：https://jsfiddle.net/b7qdcub1/2/

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

2 个答案: