テーブルの列をブートストラップ付きページに収めることができません

テーブルが画面に収まらない。ほとんどの組み合わせで試してみましたが動作しません。素人、助けが必要です。テーブルの列をブートストラップ付きページに収めることができません

私は多分間違っているいくつかの愚かなミスを行くいただきました！知っていないとどんな間違いを見つけることができませんでしたん

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Generate</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    </head> 
    <body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header" > 
       <a class="navbar-brand" href="index.html"> <img alt="Brand" src="slideshow/img.png" style="height: 40px; display: inline-block; margin-top: -5px"> </a> 
      </div> 
      <ul class="nav navbar-nav" > 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="about.html">Generate POR</a></li> 
       <li><a href="Update\Adminlogin.html">Update POR</a></li> 
       <li><a href="video.html">Help</a></li> 
       <li><a href="contact.html">Contact us</a></li> 

      </ul> 

      <form class="navbar-form navbar-right"> 
       <div class="form-group" id="demo"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

      <form class="navbar-form navbar-right"> 
       <div class="form-group" id="txt1" style="color: aliceblue; margin-top: -5px" > 

       </div> 
      </form> 

     </div> 
    </nav> 

     <div class="col-md-8 col-md-offset-2"> 
      <div class="row"> 
       <form> 
        <div class="col-sm-12"> 
         <div class="row"> 
          <div class="col-sm-6 form-group"> 
           <label>P O Date</label> 
           <input type="date" class="form-control"> 
          </div> 
          <div class="col-sm-6 form-group"> 
           <label>Category</label> 
           <select class="form-control" > 
            <option>Technology</option> 
            <option>Business</option> 
            <option>Development</option> 
            <option>Process</option> 
           </select> 
          </div> 
         </div> 
        </div> 

        <div class="col-sm-12"> 
         <div class="row"> 
          <div class="col-sm-6 form-group"> 
           <label>Location</label> 
           <select class="form-control" > 
            <option>Bengaluru</option> 
            <option>Mumbai</option> 
            <option>Pune</option> 
           </select> 
          </div> 
          <div class="col-sm-3 form-group"> 
           <label>Type of training</label> 
           <select class="form-control" > 
            <option>RBI</option> 
            <option>PST</option> 
            <option>Org needs</option> 
           </select> 
          </div> 
          <div class="col-sm-3 form-group"> 
           <label>Venue Details</label> 
           <select class="form-control" > 
            <option>Mumbai</option> 
            <option>Bengluru</option> 
            <option>Pune</option> 
           </select> 
          </div> 
         </div> 
        </div> 

        <div class="col-sm-12"> 
         <div class="row"> 
          <div class="col-sm-6 form-group"> 
           <div class="form-group"> 
            <label>Vendor Address</label> 
            <textarea placeholder="Vendor Address Here.." rows="3" class="form-control"></textarea> 
           </div> 
          </div> 

          <div class="col-sm-6 form-group"> 
           <div class="form-group"> 
            <label>Billing Address</label> 
            <br> 
             Billing Address :<br> 
             Quinnox Consultancy Services Ltd.;<br> 
             Unit 170,SDF VI, SEEPZ SEZ,<br> 
             Andheri(East), Mumbai-400096<br> 

           </div> 
          </div> 
         </div> 
        </div>

テーブルの表示は、一部の下に良いイマイチ問題table doest fit on the screen

です

      <div class="col-sm-12"> 
           <div class="row"> 
            <table class="table table-condensed table-striped table-hover" align="center"> 
             <thead class="thead-inverse"> 
              <tr> 
               <div class="form-group"> 

                <th>Subject</th> 
                <th>Faculty</th> 
                <th colspan="2" align="center">Date</th> 
                <th>Days</th> 
                <th>Batch Size</th> 
                <th>Rate per day</th> 
                <th>Approx Expected value(INR)</th> 
               </div> 
              </tr> 
             </thead> 

             <tbody> 
              <tr> 
               <div class="form-group"> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="date"/></td> 
                <td><input type="date"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
               </div> 
              </tr> 
             </tbody> 
            </table> 
           </div> 
          </div> 




       </form> 
      </div> 
     </div> 

    </body> 
    </html>

出典

2016-11-29 Prathameshb7

とで{max-width}と{min-width}を試して、画面に合わせることができます。 –