左对齐一组表，让他们都出现在同一行

这里是我的HTML：左对齐一组表，让他们都出现在同一行

<body> 
    <div class="horizontal-scroller"> 
     <table class="float-left"> 
      <tr> 
       <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
      </tr> 
     </table> 
     <table class="float-left"> 
      <tr> 
       <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
      </tr> 
     </table> 
     <table class="float-left"> 
      <tr> 
       <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
      </tr> 
     </table> 
    </div> 
</body>

和CSS：

.float-left { 
    float: left; 
} 

.horizontal-scroller { 
    overflow-x: auto; 
}

我想才达到的效果，其中所有三个不管包含div的大小如何，表都出现在同一行上。当页面足够宽以适合它们时，此示例运行良好。但是，当我缩小页面的大小时，表格开始包装。我不希望发生这种情况。相反，我想要一个水平滚动条出现在div上，以便用户可以滚动查看它们。我怎样才能做到这一点？

Plunker例如：https://plnkr.co/edit/ffSvoraDERVgdi1RFF31?p=preview

来源

2017-04-14 isxpjm

display: flex父将把它在柔性row

/* Styles go here */ 
 

 
.horizontal-scroller { 
 
    overflow-x: auto; 
 
    display: flex; 
 
}

<div class="horizontal-scroller"> 
 
     <table> 
 
     <tr> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
 
     </tr> 
 
     </table> 
 
     <table> 
 
     <tr> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
 
     </tr> 
 
     </table> 
 
     <table> 
 
     <tr> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
 
     </tr> 
 
     </table> 
 
</div>

来源

2017-04-14 19:07:24

这可以通过在一个<div>包裹每个表和使用来实现display: inline-block和white-space: nowrap的组合。

你的HTML可能看起来像这样：

<div class="wrapper"> 
    <div class="child"> 
    <table> 
     <tr> 
     <td>Cell 1</td> 
     </tr> 
    </table> 
    </div> 
    <div class="child"> 
    <table> 
     <tr> 
     <td>Cell 2</td> 
     </tr> 
    </table> 
    </div> 
    <div class="child"> 
    <table> 
     <tr> 
     <td>Cell 3</td> 
     </tr> 
    </table> 
    </div> 
</div>

然后是CSS可以做到以下几点：

.wrapper { 
    white-space: nowrap; 
    overflow-x: auto; 
} 

.child { 
    display: inline-block; 
}

下面是完整的例子：https://jsfiddle.net/xzd0dqhk/

来源

2017-04-14 19:08:03

你不需要包装类。只需将表格元素自己设置为内联块，并将空白nowrap添加到水平滚动器类。 https://plnkr.co/edit/Xh8zXzpFcBOjA273uDA8?p=preview –

@ A.Sharma：公平点。我有时会忘记'display：table'并没有太多的功能，所有真正的表格功能都是由''和'' –

左对齐一组表，让他们都出现在同一行

回答

相关问题