Change width of one table cell (but not others) - html

Question

I have a table on my eCommerce checkout that has been recreated below.
I need to expand the width of the "shipping" method cell so that it can better fit the text inside, but also keep the order totals on the right hand side.
If I increase the width of the shipping method cell, it will expand the width of them all which will move the orders totals to the left (I do not want this to happen).
Essentially I need to change the width of the shipping method cell without effecting the other columns.
Any ideas?
/* 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 */
Try this html with css. Code above is by making them as separate tables. You could also make 3 separate table inside a big one.
.outer { width: 400px; }
#shipping_method li {width:340px;}