表格列没有从中心划分

enter image description here

这是相同的代码。

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

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

来源

2015-06-28 Devesh Agrawal

工作https://jsfiddle.net/soledar10/gc2dt3qo/ – Dmitriy

这段代码的工作原理非常好。我的意思是它们的宽度相同 – Greenhorn

我没有看到你说的问题。它工作正常。它们具有相同的宽度。有什么不对吗？ –

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

来源

2015-06-28 05:11:42 DaemonOfTheWest

使用的列宽类，因为你使用的是类table table-bordered我猜你是使用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>

来源

2015-06-28 05:22:03 Butterfly

表格列没有从中心划分

回答

相关问题