1つのテーブルセルの幅を変更します（他のテーブルセルは変更しません）

Question

私は、以下に再作成された私の電子商取引のチェックアウトのテーブルを持っています。

"配送"メソッドセルの幅を拡張して、内部のテキストに合わせやすく、右側に注文合計を保持する必要があります。

配送方法のセルの幅を広げれば、注文の合計を左に移動するすべての幅を広げます（これは起こりたくありません）。

本質的に、他の列に影響を与えずに出荷方法セルの幅を変更する必要があります。

アイデア？

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

CSSでこのHTMLを試してみてください。上記のコードは、それらを別々のテーブルにすることです。大きなものの中に3つのテーブルを作ることもできます。

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