1

在 IE8 中，我有一个带有 3 个子表的父 div。我希望表格彼此相邻，并且父 div 在 x 轴上溢出，以便用户可以滚动父 div 以查看下一个表格。HTML：

<div id="q_box">'
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table>         
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table> 
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table>

和CSS：

#q_box{
    position:relative;
    height:120px;width:100px;
    background:red;
    float:right;
    overflow-x:auto;
}
#q_box table{
    float:left;
    border:1px solid #000000;
}

jsfiddle 上的代码：http: //jsfiddle.net/tech_noob/aYAwe/

4

2 回答 2

2

一个解决方案是不使用 float left css 而是使用 display inline 块。然后，这允许您将空白 nowrap 应用于父 div。

#q_box{
    position:relative;
    height:120px;width:100px;
    background:red;
    float:right;
    overflow-x:auto;
    white-space: nowrap;
}
#q_box table{
    display: inline-block;
    border:1px solid #000000;
}

我已经更新了你的小提琴。

请注意，此内联块在 IE 7 中不起作用。您可以使用 display: inline 并为元素指定 hasLayout，例如 zoom: 1;

于 2013-09-20T17:49:15.517 回答
1

一种方法是添加另一个 div。您的顶级容器设置宽度和溢出，就像您使用#q_box. 下一个 div（新的）有一个额外的宽度来容纳浮动到左边的表格：

#wrap {
  width: 1000em;
}

更新小提琴：http: //jsfiddle.net/aYAwe/1/

于 2013-09-20T17:40:33.523 回答