Question

此处代码 Demo

fixedTable-body div包含更多ul块。所以我需要在右侧fixedTable-body div上使用水平滚动条。

左侧表行-1 ..行-10 是固定的。

左侧

<table class="table table-bordered">
  <tbody>
    <tr><td>Row - 1</td></tr>
    <tr><td>Row - 2</td></tr>
    <tr><td>Row - 3</td></tr>
    <tr><td>Row - 4</td></tr>
    <tr><td>Row - 5</td></tr>
    <tr><td>Row - 6</td></tr>
    <tr><td>Row - 7</td></tr>
    <tr><td>Row - 8</td></tr>
    <tr><td> Row - 9</td></tr>
    <tr><td>Row - 10</td></tr>
  </tbody>
</table>

Rightside

<div class="fixedTable-body">
    <ul class="list-unstyled product-detail-list">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
      <li>I</li>
      <li>J</li>
    </ul>    
    </div>

Answer 1

最简单的解决方案是给出一个固定的高度和溢出。

.fixedTable-body {
    height: 300px; /*for example*/
    overflow-y: scroll;    
}

对于水平滚动条，只需使用width和x：

.fixedTable-body {
    width: 300px; /*for example*/
    overflow-x: scroll;    
}

Answer 2

<style>
overflow-x: scroll;
overflow-y: hidden;
width: 100px;
</style>
<div class="fixedTable-body">
    <ul class="list-unstyled product-detail-list">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
      <li>I</li>
      <li>J</li>
    </ul>    
</div>

Answer 3

.fixedTable-body {
     /*for example*/
  width:100px;
  overflow-x: scroll;    
  white-space: nowrap;

}

.fixedTable-body ul li {
display:inline-block;
 }

以上css适用于水平滚动条。

如何在右侧div上制作水平滚动条？

此处代码 Demo

3 个答案: