Html 表列未从中心分开

Html 表列未从中心分开,html,css,Html,Css,这就是我的页面的外观 这是相同的代码 <table class="table table-bordered"> <tbody> <tr> <td> <h4>Name & address</h4> <div class="Name"> <input

这就是我的页面的外观

这是相同的代码

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

姓名和地址
城市
恰塔普
交货日期/时间
明天(09:00-12:00)
明天(12:00-15:00)
明天(15:00-18:00)
明天(18:00-21:00) 支付选择权 货到付款
货到付款 下单
看起来左列比右列宽。我想两列都应该使用50%的屏幕宽度


这里出了什么问题。请找个人帮忙。

给每个
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>

姓名和地址
城市
恰塔普
交货日期/时间
明天(09:00-12:00)
明天(12:00-15:00)
明天(15:00-18:00)
明天(18:00-21:00) 支付选择权 货到付款
货到付款 下单

使用列宽度类,因为您使用的是类
table table border
我想您正在使用引导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>

//左列代码在这里
//右栏代码在这里

使用此代码非常有效。我的意思是,它们的宽度相等。我没有像你说的那样看到这个问题。它很好用。它们的宽度相等。有什么不对劲吗?事实上,根据inspector的说法,左栏的宽度是506px,而右栏的宽度只有483px。