0
私はブートストラップ4のHTMLテンプレートを使用しています。素敵なテーブルを320x480に表示したいと思います。私のブートストラップ4テーブルは応答しません
ここでは、そのページに挿入しようとしているテーブルは、.table対応のクラスが追加されていても責任を負いません。
私が間違ったことを教えていただけませんか？
最初の行で<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Table</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/offcanvas.css" rel="stylesheet">
\t \t \t \t
</head>
<body>
\t
\t <div id="content">
\t \t
\t <div id="display"><br>
\t \t
\t
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MyPage</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
\t \t \t \t
\t \t <p></p>
\t \t <li class="nav-item">
</li>
\t \t \t \t \t \t
\t \t
\t \t <li class="nav-item">
</li>
\t \t <li class="nav-item">
</li>
\t \t
\t \t </ul>
\t \t
\t \t
\t \t <ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div> <!-- class="collapse navbar-collapse" id="navbarsExampleDefault" -->
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<p class="float-right hidden-md-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
\t <!-- Encart gris Jumbotron -->
\t <div class="jumbotron">
\t <h1>MyTable</h1>
\t <p>qwerty</p>
\t </div>
\t
\t <!-- Tableau sensor --> \t
\t \t \t <div> \t
\t \t \t <table class="table table-bordered table-striped table-responsive">
\t \t \t \t <thead class="thead-inverse">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t
\t \t \t \t
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t \t \t </div> \t
<!-- fin Tableau sensor --> \t
\t
\t
\t \t
\t <div class="row"> \t
\t \t
<div class="col-6 col-lg-4">
<img src="..." alt="..." class="img-thumbnail">
<p>1111</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
\t \t \t
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>2222</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
\t \t \t
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
\t \t \t
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
\t \t \t
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
\t \t \t
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
\t \t \t
\t </div><!--/row-->
\t \t </div><!--col-12 col-md-9-->
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--col-6 col-md-3 sidebar-offcanvas-->
</div><!--row row-offcanvas row-offcanvas-right-->
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div><!--/.container-->
</div> <!-- fin div display --> \t
</div> <!-- fin div content --> \t
\t
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js"></script>
\t
\t <!-- Responsive table -->
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/offcanvas.js"></script>
</body>
</html>
あなたは、ブートストラップと応答テーブルを作成しようとしたのですか？問題が何であるかをより明確にし、コード全体を貼り付けることは非常に混乱させるためです。ブートストラップで応答するテーブルを作ってみてください。divにcol-mdクラスを追加して、適切なクラスをテーブルdivに追加してください。 –