Ändere die Breite einer Tabellenzelle (aber keine anderen)

Question

Ich habe eine Tabelle in meinem eCommerce Checkout, die unten neu erstellt wurde.

Ich muss die Breite der "Versand" -Methode Zelle erweitern, so dass es den Text besser passen kann, aber auch die Reihenfolge der Summen auf der rechten Seite halten.

Wenn ich die Breite der Versandmethode Zelle vergrößern, wird sie die Breite von allen erweitern, die die Bestellungen insgesamt nach links verschieben wird (ich will das nicht passieren).

Im Wesentlichen muss ich die Breite der Versandmethode Zelle ändern, ohne die anderen Spalten zu beeinflussen.

Irgendwelche Ideen?

/* Restricts outer div container to illustrate problem */ 
 

 
.outer { 
 
    width: 400px; 
 
}

<div class="outer"> 
 
    <table class="shop_table"> 
 
    <thead> 
 
     <tr> 
 
     <th class="product-name">Product</th> 
 
     <th class="product-total">Total</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="cart_item"> 
 
     <td class="product-name"> 
 
      <div class="product-wrap"> 
 
      T-Shirts for cool people - size XXL<strong>× 12</strong> 
 
      </div> 
 
     </td> 
 
     <td class="product-total"> 
 
      $348 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 

 
     <tr class="cart-subtotal"> 
 
     <th>Subtotal</th> 
 
     <td>$348 
 
     </td> 
 
     </tr> 
 

 
     <tr class="shipping"> 
 
     <th>Shipping</th> 
 
     <td data-title="Shipping"> 
 
      <ul id="shipping_method"> 
 
      <li> 
 
       <input type="radio" class="shipping_method"> 
 
       <label for="shipping_method_1">Standard: Free 
 
       <br><small>Estimated delivery by Wednesday Sep 14th</small> 
 
       </label> 
 
      </li> 
 
      <li> 
 
       <input type="radio" class="shipping_method"> 
 
       <label for="shipping_method_2">Expedited: $23 
 
       <br><small>Estimated delivery by Tuesday Sep 13th</small> 
 
       </label> 
 
      </li> 
 
      <li> 
 
       <input type="radio" class="shipping_method"> 
 
       <label for="shipping_method_3">Priority: $46 
 
       <br><small>Estimated delivery by Tuesday Sep 13th</small> 
 
       </label> 
 
      </li> 
 
      </ul> 
 

 
     </td> 
 
     </tr> 
 

 
     <tr class="order-total"> 
 
     <th>Total</th> 
 
     <td><strong>$348</strong> 
 
     </td> 
 
     </tr> 
 

 
    </tfoot> 
 
    </table> 
 

 
</div>

Answer 1

<div class="outer"> 
    <table class="shop_table"> 
    <thead> 
     <tr> 
     <th class="product-name">Product</th> 
     <th class="product-total">Total</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="cart_item"> 
     <td class="product-name"> 
      <div class="product-wrap"> 
      T-Shirts for cool people - size XXL<strong>× 12</strong> 
      </div> 
     </td> 
     <td class="product-total"> 
      $348 
     </td> 
     </tr> 
    </tbody> 

    <tr class="cart-subtotal"> 
     <th>Subtotal</th> 
     <td>$348 
     </td> 
    </tr> 
    </table> 
    <table> 
    <tr class="shipping"> 
     <th>Shipping</th> 
     <td data-title="Shipping"> 
     <ul id="shipping_method"> 
      <li> 
      <input type="radio" class="shipping_method"> 
      <label for="shipping_method_1">Standard: Free 
       <br><small>Estimated delivery by Wednesday Sep 14th</small> 
      </label> 
      </li> 
      <li> 
      <input type="radio" class="shipping_method"> 
      <label for="shipping_method_2">Expedited: $23 
       <br><small>Estimated delivery by Tuesday Sep 13th</small> 
      </label> 
      </li> 
      <li> 
      <input type="radio" class="shipping_method"> 
      <label for="shipping_method_3">Priority: $46 
       <br><small>Estimated delivery by Tuesday Sep 13th</small> 
      </label> 
      </li> 
     </ul> 
     </td> 
    </tr> 
    </table> 
    <table> 
    <tr class="order-total"> 
     <th>Total</th> 
     <td><strong>$348</strong> 
     </td> 
    </tr> 
    </table> 
</div> 

/* Restricts outer div container to illustrate problem */ 

Versuchen Sie diesen HTML mit CSS. Code oben ist, indem Sie sie als separate Tabellen machen. Sie könnten auch 3 separate Tabelle in einem großen machen.

.outer { width: 400px; } 
#shipping_method li {width:340px;}