Question

我的基本概要是：

<div class="availability-tables" >
   <table class="table table-bordered availability-table-property-column">
   </table>
   <table class="table viewings-table show-scroll-bar" >
   </table>
</div>

JSFiddle中的更多细节：http://jsfiddle.net/3ezxu/8/

如果您在IE9中运行它（或在IE的更高版本中使用IE9文档模式的IE9兼容模式），则其中一个表出现在另一个表的下方，而不是旁边的表。

在Chrome浏览器/ FF /更高版本的IE浏览器中，两个表格彼此相邻，并带有左侧表格的滚动条。

左边漂浮：

.gyms-table {
    float: left;
}
.availability-table-property-column {
    float:left;
}

http://jsfiddle.net/3ezxu/9/

只是在任何浏览器中都不能正常工作，如果我使用绝对或相对定位，那么我无法让scroll-x工作

有什么建议吗？我真的在这个系绳的尽头。

Answer 1

表的问题在于，即使您定义宽度，它也会受到单元格内容的影响。表格的宽度可能不受尊重。

也许你可以用每个div包装你的表，然后使用这些div并排放置，如下所示：

http://jsfiddle.net/3ezxu/15/

<div class="availability-tables" >
  <div>
      <table class="table table-bordered availability-table-property-column">
         <!-- TABLE 01 -->          
      </table>
  </div>

  <div>
      <table class="table gyms-table show-scroll-bar" >
         <!-- TABLE 02 -->
      </table>
  </div>
</div>

并将其添加到css：

.availability-tables {
  padding-right: 7px;
  padding-left: 7px;
  display: table;
    width: 100%;
}

.availability-tables > div {
    display: table-cell;
    position: relative;
}

.availability-tables > div:first-child {
    width: 20%;
}

为什么我的两个表在IE9中不能彼此相邻

1 个答案: