2016-04-28 17 views
0

ドロップダウンボタン内で表のスタイルを設定しようとしています。基本的にテーブルでブートストラップのドロップダウンボタンをどのようにスタイル設定するのですか?

<div class="col-sm-6 col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-parent=".accordion" data-target="#demo2" aria-expanded="true">Supported Tenders</button> 
 
     <div id="demo2" class="out collapse in" aria-expanded="true"> 
 
     <br> 
 
     <table table-hover=""> 
 
       <tr> 
 
        <td>Account Type URI: Account</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Network Type URI: Network</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Onboarding Tender: Discover</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Onboarding Gateway: MCX</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Attribute Name: New</td> <tr> 
 
        </tr><td>Attribute Value: Tender</td> 
 
       </tr> 
 
     </table> 
 
     </div> 
 
    </div>

、 1.私は、私は次の列へと「属性値」「属性名」に移動する方法を疑問に思って。

  1. テーブルを縮小/折りたたむパネルを作成する方法はありますか?

ご協力いただければ幸いです。ありがとうございました!

答えて

1

は、私は謝罪この

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h3>table collapsed in this button click for view the table</h3> 
 
    <button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-target="#demo">Supported Tenders</button> 
 
    <div id="demo" class="collapse"> 
 
    <table table-hover=""> 
 
       <tr> 
 
        <td>Account Type URI: Account</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Network Type URI: Network</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Onboarding Tender: Discover</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Onboarding Gateway: MCX</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Attribute Name: New</td> 
 
        <td>Attribute Value: Tender</td> 
 
       </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

+0

を試してみてください。私は適切にフレーズを入れなかった。私はスクリプトのプラグインを認識しています。サポートされている入札者のドロップダウンに別の折りたたみ可能なバーを作成し、属性名と属性値を次の列に重ねて表示することを検討していました。 –

+0

http://www.bootply.com/fdTMNTiLisこのリンクにチェックマークを入れてください。 –

+0

私はそれを理解するためにその例を正確に使用しました。ありがとう! –

関連する問題