表格列不会从中心划分

Question

这就是我的网页的样子。

这是相同的代码。

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                <h4>Name & address</h4> 
                <div class="Name">
                    <input ng-model="Name" type="text" placeholder="Name" class="form-control"/>
                </div>              

                <div class="Name">
                    <textarea class="form-control" ng-model="Address" placeholder="Address.." rows="4"></textarea>
                </div>

                <div class="Name">
                    <select ng-init="City=Chhatarpur" ng-model="City" class="form-control">
                        <option value="" ng-selected="selected">City</option>
                        <option value="Chhatarpur" ng-selected="selected">Chhatarpur</option>
                    </select>
                </div>

                <div class="Name">
                    <!--<input  type="text" value="+91" class="form-control" size="2" disabled/>-->
                    <input  ng-model="Mobile" type="text" placeholder="Mobile Number" class="form-control" maxlength="10"/>
                </div>  
            </td>

            <td>
                <h4>Date/time of delivery</h4>
                <div ng-if="(CurrentHour>=18 && CurrentHour<24) || (CurrentHour>=1 && CurrentHour<9)" >
                    <input type="radio" ng-model="order.delivery" value="5"> Tomorrow (09:00-12:00) <br/>
                    <input type="radio" ng-model="order.delivery" value="6"> Tomorrow (12:00-15:00) <br/>
                    <input type="radio" ng-model="order.delivery" value="7"> Tomorrow (15:00-18:00) <br/>
                    <input type="radio" ng-model="order.delivery" value="8"> Tomorrow (18:00-21:00) 
                </div>


                <h4>Payment option </h4>
                <input type="radio" ng-model="order.payment" value="Cash on delivery"> Cash on delivery <br/>
                <input type="radio" ng-model="order.payment" value="Card on delivery"> Card on delivery
                <button style="margin-top:20px;" type="button" class="btn btn-lg btn-primary btn-block" ng-click="">Place order</button>
            </td>
        </tr>
    </tbody>
</table>

看起来左栏的宽度比右栏宽。我希望两列都使用50％的屏幕宽度。

这里有什么问题。可以请一些人帮忙。

Answer 1

为每个td宽度50%。

<table class="table table-bordered">
<tbody>
    <tr>
        <td width="50%">
            <h4>Name & address</h4> 
            <div class="Name">
                <input ng-model="Name" type="text" placeholder="Name" class="form-control"/>
            </div>              

            <div class="Name">
                <textarea class="form-control" ng-model="Address" placeholder="Address.." rows="4"></textarea>
            </div>

            <div class="Name">
                <select ng-init="City=Chhatarpur" ng-model="City" class="form-control">
                    <option value="" ng-selected="selected">City</option>
                    <option value="Chhatarpur" ng-selected="selected">Chhatarpur</option>
                </select>
            </div>

            <div class="Name">
                <!--<input  type="text" value="+91" class="form-control" size="2" disabled/>-->
                <input  ng-model="Mobile" type="text" placeholder="Mobile Number" class="form-control" maxlength="10"/>
            </div>  
        </td>

        <td width="50%">
            <h4>Date/time of delivery</h4>
            <div ng-if="(CurrentHour>=18 && CurrentHour<24) || (CurrentHour>=1 && CurrentHour<9)" >
                <input type="radio" ng-model="order.delivery" value="5"> Tomorrow (09:00-12:00) <br/>
                <input type="radio" ng-model="order.delivery" value="6"> Tomorrow (12:00-15:00) <br/>
                <input type="radio" ng-model="order.delivery" value="7"> Tomorrow (15:00-18:00) <br/>
                <input type="radio" ng-model="order.delivery" value="8"> Tomorrow (18:00-21:00) 
            </div>


            <h4>Payment option </h4>
            <input type="radio" ng-model="order.payment" value="Cash on delivery"> Cash on delivery <br/>
            <input type="radio" ng-model="order.payment" value="Card on delivery"> Card on delivery
            <button style="margin-top:20px;" type="button" class="btn btn-lg btn-primary btn-block" ng-click="">Place order</button>
        </td>
    </tr>
</tbody>
</table>

JSFiddle Here

Answer 2

使用列宽类，因为您正在使用类table table-bordered我猜你使用的是bootstrap css。

如果您使用的是bootstrapv3.0及以上版本，请使用

<div class="col-md-6">
    // LEFT COLUMN CODE GOES HERE
</div>
<div class="col-md-6">
   // RIGHT COLUMN CODE GOES HERE
</div>

如果您使用的内容少于bootstrapv3.0

<div class="span6">
    // LEFT COLUMN CODE GOES HERE
</div>

<div class="span6">
    // RIGHT COLUMN CODE GOES HERE
</div>