DIV要素の横スクロールについて

下記、bootstrapを用いテーブルを表示しているのですが、
列幅を固定したまま、横にスクロールするにはどのようにすれば良いでしょうか。

先ほど質問させて頂いたのですが、うまくできなかったので再質問させて頂きました。

lang
1    <div id="page-wrapper">
2
3        <div class="container-fluid">
4
5            <!-- Page Heading -->
6            <div class="row">
7
8                <!-- /col-lg-12 -->
9                <div class="col-lg-12">
10                    
11                    <h2>テスト</h2>
12
13                    <!--panel-->
14                    <div class="panel panel-default">
15
16                        <!--panel-heading-->
17                        <div class="panel-heading">
18                            <h3 class="panel-title"><i class="fa fa-money fa-fw"></i></h3>
19                        </div>
20                        <!--#panel-heading-->
21
22                        <!--panel-body-->
23                        <div class="panel-body">
24
25                             <div class="table-responsive">
26
27                                 <table border="1" cellpadding="0" >
28                                     <tr>
29                                         <th width="100">幅100px</th>
30                                         <th width="200">幅200px</th>
31                                         <th width="300">幅300px</th>
32                                         <th width="400">幅400px</th>
33                                         <th width="500">幅500px</th>
34                                         <th width="600">幅600px</th>
35                                     </tr>
36                                     <tr>
37                                         <th width="100">幅100px</th>
38                                         <th width="200">幅200px</th>
39                                         <th width="300">幅300px</th>
40                                         <th width="400">幅400px</th>
41                                         <th width="500">幅500px</th>
42                                         <th width="600">幅600px</th>
43                                     </tr>
44                                     <tr>
45                                         <th width="100">幅100px</th>
46                                         <th width="200">幅200px</th>
47                                         <th width="300">幅300px</th>
48                                         <th width="400">幅400px</th>
49                                         <th width="500">幅500px</th>
50                                         <th width="600">幅600px</th>
51                                     </tr>
52                                 </table>
53   
54
55                             </div>
56                            <!--#table-responsive-->
57
58
59                        </div>
60                        <!--#panel-body-->
61
62                    </div>
63                    <!--#panel-body-->
64
65                </div>
66                <!-- /.panel -->
67
68            </div>
69            <!-- /#col-lg-12 -->
70
71        </div>
72        <!-- /#Page Heading -->
73
74    </div>
75    <!-- /#page-wrapper -->
76

行動規範の内容に同意します

回答1件

ベストアンサー

<div class="table-responsive"> が効かないのは、この設定が画面幅 767px以下の場合のみ有効なためです。

https://github.com/twbs/bootstrap/blob/master/less/tables.less#L175
ここの内容をみて、真似すれば期待通りに動作すると思います。

追記：
私も自信がないのですが、BootstrapのCSSを読みこんだ後に以下のCSSで上書きすればたぶん動くと思います。

lang
1.table-responsive {
2  width: 100%;
3  margin-bottom: 15px;
4  overflow-y: hidden;
5  -ms-overflow-style: -ms-autohiding-scrollbar;
6  border: 1px solid #ddd;
7}
8
9.table-responsive > .table {
10  margin-bottom: 0;
11}