Question

我的电子商务结帐台上有一张表，已在下面重新创建。

我需要扩大＆＃34;运费＆＃34;的宽度。方法单元格，以便它可以更好地适应文本内部，但也保持顺序总计在右侧。

如果我增加运输方法单元格的宽度，它将扩展它们的宽度，这将把订单总数向左移动（我不希望这种情况发生）。

基本上我需要更改运输方法单元格的宽度而不影响其他列。

有什么想法吗？

＆＃13;

/* Restricts outer div container to illustrate problem */

.outer {
  width: 400px;
}

＆＃13;

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

＆＃13;

Answer 1

<td>

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

用css试试这个html。上面的代码是将它们作为单独的表格。你也可以在一张大桌子里面制作3张独立的桌子。

/* Restricts outer div container to illustrate problem */

更改一个表格单元格的宽度（但不更改其他表格

1 个答案: