Bootstrap4のtable-responsiveを使い、
テーブルよりウィンドウ幅が狭くなったらテーブルを横スクロール表示させたいです。
以下のように記述したところ、
576px〜991pxの間はテーブルに横スクロールが出てくれるのですが、
575px以下になると解除され、画面の一番下に横スクロールが現れ、テーブル幅が全て出てきてしまいます。
■item01.html
<!DOCTYPE html> <html> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="UTF-8"> <title>ITEM01</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="../../img/favicon.ico"> <link rel="canonical" href=""> <!-- スタイルシートはここから --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" href="../../css/slick-theme.css"/> <link rel="stylesheet" href="../../css/slick.css"/> <link rel="stylesheet" href="../../css/item01.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="../../js/load.js"> </script> </head> <body data-spy="scroll" data-target="#navbar"> <!-- ********************HEADER******************** --> ・・・ <!-- ********************HEADER******************** --> <!-- ********************BREADCRUMB******************** --> <div class="border-bottom border-secondary"> <div class="container"> <nav aria-label="パンくずリスト"> <ol class="breadcrumb bg-transparent m-0 px-0"> ・・・ </ol> </nav> </div> </div> <!-- ********************BREADCRUMB******************** --> <!-- ********************MAIN******************** --> <main class="container sticky-pos" id="product-page"> <div class="row"> <!-- *****メインコンテンツ***** --> <div class="main-content"> <section class="container py-5"> <div class="table-responsive"> <table class="table text-nowrap table-bordered"> <tr> <th>● ●</th> <th>●●●●●●●</th> <th>●●●●●●●●</th> <th>●●●●</th> <th>●●●●●●●●●</th> <th>●●●</th> <th>●●●●●●</th> </tr> <tr> <td> AAAAAAAA </td> <td>BBBBBBBBBBBBBB</td> <td>CCC</td> <td class="gold">DDDDDDDDD</td> <td>EEE</td> <td>◎</td> <td> <a href="" target="_blank" rel="noopener"> こちら </a> </td> </tr> <tr> <td colspan="7" class="text-left"> <p> 【FFFFF】<br> ◎:GGGGGGGGGGGGGGGGGGGG<br> ○:HHHHHHHHHHHHHHHHHHHHHHHHHHHHH<br> △:IIIIIIIIIIIIIIIIII<br> ×:JJJJJJJJJJJJJJJJJJJJJJ </p> </td> </tr> </table> </div> </section> </div><!--div class="main-content col-lg-9"--> </div><!--/.row--> </main> <!-- ********************FOOTER******************** --> <script type="text/javascript">//フッター読み込み includeHTML("inc/footer.html","../../"); </script> <!-- ********************FOOTER******************** --> <!-- ********************JAVASCRIPT******************** --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- ********************JAVASCRIPT******************** --> </body> </html>
■item01.css
@charset "utf-8"; main { display: block; } main.container { padding-top: 15px; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/30 01:14
2019/12/03 00:17