CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-table
Jake
Jake

Reputation: 2923

Bootstrap table column not same width when using a form input

I am trying to create a bootstrap table with one of the cell having a form input. However, I realised that this input prevents bootstrap from setting the table width to be the same for each column, even when I reduce the length of the input.

Can anyone help with this to adjust the width to be consistent for all columns? Thanks.

enter image description here

<!doctype html>

<head>
    <link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
    <script src="./frameworks/bootstrap.min.js"></script>
    <script src="./frameworks/button_plus_minus.js"></script>
    <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-7">
                <table class="table table-striped">
                    <thead>
                        <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Item</th>
                        <th>Value ($)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td>1</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Silver</td>
                        <td>1500</td>
                        </tr>
                        <tr>
                        <td>2</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Gold</td>
                        <td>
                            <div class="col-xs-8 input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
                                        <span class="fa fa-minus"></span>
                                    </button>
                                </span>
                                <input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
                                        <span class="fa fa-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td>3</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>US</td>
                        <td>Computer</td>
                        <td>2000</td>
                        </tr>
                        <tr>
                        <td>4</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Japan</td>
                        <td>Bags</td>
                        <td>1000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</body>

Upvotes: 2

Views: 1686

Answers (1)

Ayush Kumar
Ayush Kumar

Reputation: 954

Added a class to the <table> and the <input> tag. By making the text-align center will make your table more subtle and consistent. You should also try using classes for other screen sizes like col-md-6 or col-lg-4 whatever suits you best. But this practice will help you control your UI across different screen sizes. Hope that helps. Let me know if this doesn't work out for you.

    <!doctype html>

<head>
    <link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
    <script src="./frameworks/bootstrap.min.js"></script>
    <script src="./frameworks/button_plus_minus.js"></script>
    <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <style>
.txt_cent{
    text-align:center;
}
.inp_width{
    width:70px;
}
    </style>
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-7">
                <table class="table table-striped txt_cent" >
                    <thead>
                        <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Item</th>
                        <th>Value ($)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td>1</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Silver</td>
                        <td>1500</td>
                        </tr>
                        <tr>
                        <td>2</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Gold</td>
                        <td>
                            <div class="col-xs-8 input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
                                        <span class="fa fa-minus"></span>
                                    </button>
                                </span>
                                <input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
                                        <span class="fa fa-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td>3</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>US</td>
                        <td>Computer</td>
                        <td>2000</td>
                        </tr>
                        <tr>
                        <td>4</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Japan</td>
                        <td>Bags</td>
                        <td>1000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</body>

Upvotes: 1

Related Questions