モバイルデバイスでは、外観がはるかによく見えて2行に落ちるが、ブートストラップCSSを使用する必要があるため、問題が発生している。レスポンシブテーブルが正しくブートストラップCSSのために崩壊していない
私が達成しようとしていること。
https://jsfiddle.net/5u3a2snh/8/
それがブートストラップで動作するように取得することができません:
https://jsfiddle.net/5u3a2snh/9/
ため、ブートストラップの変更のいずれかを受け入れることはありません私の本格的なプロジェクト:
https://jsfiddle.net/vo1npqdx/320/
誰かが助けてくださいます私はまだブートストラップCSSを使用してこれを動作させるには?私はなぜCSSが私のテーブルにそんなに影響を与えているのか不明です。
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Pay</th>
<th>Print</th>
<th>Year</th>
<th>Property Id</th>
<th>Name/Location</th>
<th>Status</th>
<th>Amount Paid</th>
<th>Date Paid</th>
<th>Due</th>
<th>Pin</th>
<th>Box</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>2016</td>
<td><a href="invoicepage.html">2609110008</a></td>
<td>Table cell</td>
<td>Paid</td>
<td>1,372.37</td>
<td>12/01/2016</td>
<td>0.00</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>2015</td>
<td><a href="invoicepage.html">2609110008</a></td>
<td>Table cell</td>
<td>Paid</td>
<td>1,430.83</td>
<td>02/22/2016</td>
<td>0.00</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>2014</td>
<td><a href="invoicepage.html">2609110008</a></td>
<td>Table cell</td>
<td>Paid</td>
<td>1,407.88</td>
<td>02/02/2015</td>
<td>0.00</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
JSタグを追加しました。これは、このプロジェクトで使用している別の言語からも同様に修正できます。
投稿されたコードにテーブル終了タグが見つかりませんでした。最初に確認してください。 –
@masud_moniそれは問題ではありませんでしたが、それに気づいてくれてありがとう。それは最後のコピーに残っていた –