CODEWITHSUNDEEP
htmlcsswebtwitter-bootstrap-3
Prathameshb7
Prathameshb7

Reputation: 17

Cannot fit table columns on page with bootstrap

table doesn't fit on the screen. tried with most of the combination but doesn't work. amateur, help needed.

i don't know whats going wrong maybe some silly mistake and wasn't able to find any mistake

  <!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>

Display of tables isnt good below part is the problemtable 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>

Upvotes: 0

Views: 2847

Answers (3)

Piyush Verma
Piyush Verma

Reputation: 295

If you want to fit the table on the screen keep the table code out of the div which has class "col-md-8 col-md-offset-2" and if the table is overflowing the screen you can use class table-responsive as parent of table.

Upvotes: 1

Chiller
Chiller

Reputation: 9738

you need to wrap the table in div with a class table-responsive and dont wrap it directly to row class

here is demo

Upvotes: 1

Sam Chivers
Sam Chivers

Reputation: 34

What size screen doesn't it fit on? Bootstrap 3 has a .table-responsive class that can be added to the table allows horizontal scrolling on devices smaller than 768px wide. The docs for that are here.

Upvotes: 0

Related Questions