web-dev-qa-db-ja.com

Bootstrapレスポンシブテーブルがレスポンシブとして機能しない

このリンクを見て（ページの最後までスクロールしてください）、理由を教えてください。」
1-テーブルが応答しませんか？ 2- <td>とcol-md-3を使用してcol-lg-3の幅を制御したいのですが、これはテーブルでも機能しますか？

これが私が持っているコードです：

<div class="col-md-offset-1  col-lg-offset-1 col-md-6    col-lg-6">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<td width="174"><strong>7:30 – 8:45 a.m.</strong></td>
<td>Arrival / Health CheckFree Choice in Activity Areas, books, puzzles, matching games, large block building, small blocks, floor toys, Lego, trucks and car play.</td>
</tr>
<tr>
<td><strong>8:45 – 9:00 a.m.</strong></td>
<td>Clean-up, toileting, wash up for snack</td>
</tr>
<tr>
<td><strong>9:00 – 9:30 a.m.</strong></td>
<td>Morning snack</td>
</tr>
<tr>
<td><strong>9:30 -10:00 a.m.</strong></td>
<td>Circle Time: Action songs, singing time, finger plays, hello songs, discussion of daily activities</td>
</tr>
   </tbody>
</table>
</div>

ご覧のとおり、col-md-3とcol-lg-3ではテーブルサイズを制御できなかったため、divでラップしましたが、レスポンシブが機能していません

twitter-bootstraptwitter-bootstrap-3bootstrapper
16
Mona Coder

この機能に関するドキュメント をもう一度お読みください。 table-responsiveクラスは、テーブル自体ではなく、ラッパーdivに存在する必要があります。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
53
ceejayoz

.table-responsiveはラッパーdivにある必要があります。cssプロパティoverflow:scrollスクロールバーがテーブルタグでアクティブになっていなくても、クラスtable-responsiveのラッパーdivを使用してスクロールバーを表示するためです。レスポンシブなテーブル。

これが、このようなレスポンシブテーブルコードを記述する必要がある理由です。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
1
Gaurav Aggarwal

テーブルもtable-responsiveに設定すると、テーブル自体にdisplay: blockクラスを設定するように機能します。ただし、一般的にはラッパーdivを使用する方が適切です。

0
Andrew Dant