Question

I use modal to show table:

        <div class="modal-body">
            <form class="form-horizontal">
                <label><h5>dev</h5></label>
                <input type="text" class="input-xlarge" id="dconDev">
                <label><h5>speed</h5></label>
                <input type="text" class="input-xlarge" id="dconSpeed">
                <input type="button" class="btn" id="dconBut" onclick="$('#appBlock').fadeIn('normal'); $('#dcon').show(); addPort('dcon',$('#dconDev').val(),$('#dconSpeed').val())" value="Добавить">
                <table class="table table-condensed">
                    <thead>
                        <th>lbl</th>
                        <th>edizm</th>
                        <th>id</th>
                        <th>a</th>
                        <th>b</th>
                        <th>en_spar</th>
                        <th>spar</th>
                        <th>en_period</th>
                        <th>peiod</th>
                    </thead>
                    <tbody id="dconTable">
                        <th><input type="text" id="lbld"></th>
                        <th><input type="text" id="edizmd"></th>
                        <th><input type="text" id="idd"></th>
                        <th><input type="text" id="ad"></th>
                        <th><input type="text" id="bd"></th>
                        <th><input type="text" id="en_spard"></th>
                        <th><input type="text" id="spard"></th>
                        <th><input type="text" id="en_periodd"></th>
                        <th><input type="text" id="periodd"></th>
                    </tbody> 
                </table>
            </form>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

How can I make modal expand to table size, or fit the table to modal borders? I tried to edit modal section in bootstrap.css but new position of modal is not at center. Also I tried to add something like a class="span4 to tags inside table, which seems doesn’t do anything.
Thanks.

Answer 1

Suppose the modal width is 600px. To position the modal in center , use

.modal {
left: 50%;
margin-left: -300px; (negative of half of it’s width;)
}