bootstrapでtableの列幅固定

bootstrapでtableの列幅の固定をして、
ブラウザの幅が狭くなったら、横スクロールバーを表示したいです。

幅固定とスクロールの部分のcssのみ、ページに直接書いたのですが、
効いていないようで、ブラウザの幅が狭くなると、列幅も小さくなってしまいます。

列幅を固定するにはどうすれば良いでしょうか。

lang
1                <style type="text/css">
2                    
3                    thead.scrollHead, tbody.scrollBody {
4                        display: block;
5                    }
6
7                    tbody.scrollBody {
8                        overflow-y: scroll;
9                        height: 400px;
10                    }
11
12                    td, th {table-layout: fixed;}
13                    .c1 {width: 60px;}
14                    .c2 {width: 180px;}
15                    .c3 {width: 100px;}
16                    .c4 {width: 200px;}
17                    .c5 {width: 160px;}
18                    .c6 {width: 250px;}
19                    .c7 {width: 100px;}
20                    .c8 {width: 140px;}
21                    .c9 {width: 200px;}
22                    .c10 {width: 200px;}
23                    .table-responsive {
24                        z-index: 999;
25                        overflow-x: scroll;
26                    }
27
28                </style>
29
30
31                <div id="page-wrapper">
32
33                    <!-- /#container-fluid -->
34                    <div class="container-fluid">
35
36                        <!-- Page Heading -->
37                        <div class="row">
38
39                            <div class="col-lg-12">
40
41                                <div class="panel panel-default">
42
43                                    <!--panel-heading-->
44                                    <div class="panel-heading">
45                                        <h3 class="panel-title"><i class="fa fa-money fa-fw"></i>商品テーブル</h3>
46                                    </div>
47                                    <!--#panel-heading-->
48
49                                    <!--panel-body-->
50                                    <div class="panel-body">
51
52                                        <div class="table-responsive">
53
54                                            <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1">
55                                                <thead class="scrollHead">
56                                                    <tr>
57                                                        <th class="c1">選択</th>
58                                                        <th class="c2">アクション</th>
59                                                        <th class="c3">表示順</th>
60                                                        <th class="c4">商品</th>
61                                                        <th class="c5">規格</th>
62                                                        <th class="c6">商品グループ</th>
63                                                        <th class="c7">担当者名</th>
64                                                        <th class="c8">担当ID</th>
65                                                        <th class="c9">更新日</th>
66                                                        <th class="c9">登録日</th>
67                                                    </tr>
68
69                                                </thead>
70
71                                                <tbody class="scrollBody">
72
73                                                    <tr style="">
74                                                        <td class="c1">
75                                                            <span style="display: inline-block; width: 40px;">
76                                                                <input type="checkbox" /></span></td>
77                                                        <td class="c2">
78                                                            <input type="submit" value="削除" />
79                                                            <input type="submit" value="編集" />
80                                                        </td>
81                                                        <td class="c3">
82                                                            <span >20</span></td>
83                                                        <td class="c4">
84                                                            <span >大根</span></td>
85                                                        <td class="c5">
86                                                            <span >２Ｌ</span></td>
87                                                        <td class="c6">
88                                                            <span >グループ１</span></td>
89                                                        <td class="c7">
90                                                            <span >担当</span></td>
91                                                        <td class="c8">
92                                                            <span >002</span></td>
93                                                        <td class="c9">
94                                                            <span >2014/01/01 0:00:00</span></td>
95                                                        <td class="c10">
96                                                            <span >2014/01/01 0:00:00</span></td>
97                                                    </tr>
98                                                    <tr style="">
99                                                        <td class="c1">
100                                                            <span style="display: inline-block; width: 40px;">
101                                                                <input type="checkbox" /></span></td>
102                                                        <td class="c2">
103                                                            <input type="submit" value="削除" />
104                                                            <input type="submit" value="編集" />
105                                                        </td>
106                                                        <td class="c3">
107                                                            <span >20</span></td>
108                                                        <td class="c4">
109                                                            <span >大根</span></td>
110                                                        <td class="c5">
111                                                            <span >２Ｌ</span></td>
112                                                        <td class="c6">
113                                                            <span >グループ１</span></td>
114                                                        <td class="c7">
115                                                            <span >担当</span></td>
116                                                        <td class="c8">
117                                                            <span >002</span></td>
118                                                        <td class="c9">
119                                                            <span >2014/01/01 0:00:00</span></td>
120                                                        <td class="c10">
121                                                            <span >2014/01/01 0:00:00</span></td>
122                                                    </tr>
123
124                                                </tbody>
125                                            </table>
126
127                                        </div>
128                                        <!--#table-responsive-->
129
130                                    </div>
131                                    <!--#panel-body-->
132
133                                </div>
134                                <!-- /.panel -->
135
136                            </div>
137                            <!-- /#col-lg-12 -->
138
139                        </div>
140
141                    </div>
142                    <!-- /#Page Heading -->
143
144                </div>
145                <!-- /#page-wrapper -->

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

回答1件

ベストアンサー

bootstrap.cssファイルと同じ階層につぎの htmlファイルを置きます。

lang
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta name="viewport" content="width=device-width, initial-scale=1">
5        <link rel="stylesheet" href="bootstrap.css" />
6    </head>
7    <body>
8        <div class="table-responsive">
9            <table class="table table-condensed">
10                <thead>
11                    <tr>
12                        <th>Pricing Table</th>
13                        <th>Yen</th>
14                    </tr>
15                </thead>
16                <tbody>
17                    <tr>
18                        <td>sample 1</td>
19                        <td>10,000</td>
20                    </tr>
21                    <tr>
22                        <td>sample 2</td>
23                        <td>12,000</td>
24                    </tr>
25                    <tr>
26                        <td>sample3</td>
27                        <td>9,800</td>
28                    </tr>
29                    <tr>
30                        <td>sample 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </td>
31                        <td>7,800</td>
32                    </tr>
33                </tbody>
34            </table>
35        </div>
36    </body>
37</html>