左對齊一組表，讓他們都出現在同一行

這裏是我的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'並沒有太多的功能，所有真正的表格功能都是由''和'' –

左對齊一組表，讓他們都出現在同一行

回答

相關問題