HTMLテーブル：列がない場合のオーバーフロー-xスクロール

Question

特定の列を持つ表があります。列を追加すると、テーブルdivは水平方向にスクロールする必要があります。

私は10の列があり、2つの列を追加します。

だから、10列までスクロールしないようにしてください。さらに2列ある場合は、overflow-x:scrollが必要です。

.horizontal_scroll_div{ 
 
    
 
} 
 

 
.horizontal_scroll_div .scroll_table_div{ 
 
    overflow-x: scroll !important; 
 
} 
 

 
.horizontal_scroll_div .scroll_table_div .table_section{ 
 
    width:1200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="horizontal_scroll_div"> 
 
    <div class="scroll_table_div b"> 
 
     <div class="table_section"> 
 
     <div class="row m-l-none m-r-none " > 
 
      <div class="col-sm-12 col-md-12 set_padding_0"> 
 
       <div class="table-responsive m-b-none no_border"> 
 
       <table class="table b-t b-b no-footer"> 
 
        <thead class="bg-white"> 
 
        <tr> 
 
        <th>column 1</th> 
 
        <th>column 2</th> 
 
        <th>column 3</th> 
 
        <th>column 4</th> 
 
        <th>column 5</th> 
 
        <th>column 6</th> 
 
        <th>column 7</th> 
 
        <th>column 8</th> 
 
        <th>column 9</th> 
 
        <th>column 10</th> 
 
        <th>column 11</th> 
 
        <th>column 12</th> 
 
        
 
        </tr> 
 
        </thead> 
 
        <tbody> 
 
        <tr> 
 
        <td>value 1</td> 
 
        <td>value 2</td> 
 
        <td>value 3</td> 
 
        <td>value 4</td> 
 
        <td>value 5</td> 
 
        <td>value 6</td> 
 
        <td>value 7</td> 
 
        <td>value 8</td> 
 
        <td>value 9</td> 
 
        <td>value 10</td> 
 
        <td>value 11</td> 
 
        <td>value 12</td> 
 
        </tr> 
 
        </tbody> 
 
        </table> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>

すべてのヘルプは素晴らしいことです。 ありがとうございます。

Answer 1

余分な列を追加すると固定幅よりも大きくなるように10列の固定幅を設定すると、スクロールが表示されます。どの場合に使用できますか

overflow-x:auto; 

Answer 2

私は手動でCSSの変更を設定する必要がありますと思う。 たとえば、 10列のスクロールせずに100幅、12 - スクロール

.column{width: 100px;} #its 10x100 = 1000px 

    @media screen and (min-width: 1001px) { 
     .table {overflow-x: scroll;} 
    } 

Answer 3

で使用することができます

幅はスクロールバーが表示されていることを後1200pxに達しています。

.horizontal_scroll_div .scroll_table_div{ 
    overflow-x: auto !important; 
} 

Answer 4

.horizontal_scroll_div .scroll_table_div 

のdivクラス内でこの

overflow-x: auto !important; 

をお試しください