flexでレイアウトした要素の中にtableを配置しています。
画面幅768px時にtableを横スクロールさせてたいのですが、tableが飛び出てしまいます。
対処法はありますでしょうか。
何卒よろしくお願いいたします。
html
1<main> 2 <ul class="list_layout"> 3 <li class="side"> 4 サイド 5 </li> 6 <li class="main"> 7 <section class="table_wrap"> 8 <div class="table_wrap_inner"> 9 <table> 10 <thead> 11 <tr> 12 <th>見出し</th> 13 <th>見出し</th> 14 <th>見出し</th> 15 <th>見出し</th> 16 <th>見出し</th> 17 </tr> 18 </thead> 19 <tfoot> 20 <tr> 21 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 22 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 23 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 24 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 25 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 26 </tr> 27 </tfoot> 28 </table> 29 </div> 30 </section> 31 </li> 32 </ul> 33</main> 34
css
1* { 2 box-sizing: border-box; 3} 4main { 5 padding: 100px; 6} 7.list_layout { 8 display: -webkit-flex; display: flex; 9 -webkit-flex-wrap: nowrap; flex-wrap: nowrap; 10} 11.list_layout .side { 12 -webkit-flex: 0 0 300px; flex: 0 0 300px; 13 background: blue; 14 min-height: 100px; 15} 16.list_layout .main { 17 -webkit-flex: 1 1 auto; flex: 1 1 auto; 18 background: #ddd; 19} 20 21table { 22 width: 100%; 23} 24@media screen and (max-width: 768px){ 25 .table_wrap { 26 overflow: auto; 27 } 28 .table_wrap_inner { 29 width: 800px; 30 } 31} 32
回答3件
あなたの回答
tips
プレビュー