Cart and Summary

Line-item table beside a sticky order summary that stays keyboard-reachable.

Cart

The cart table may scroll horizontally on a narrow screen.

Items in your cart
Product Color Size Price Quantity Total
Sense Advanced Smartwatch
Glossy black XL $199
$398
Phone 13 Pro Max 128GB
Pacific blue — $150
$300
ProBook 13 inch M1
Space gray 13" $65
$130

Important pattern

Keep the summary after the table in source order so sticky positioning does not strand keyboard users.

<div class="cart-layout">
  <section class="table-scroll" tabindex="0" aria-label="Shopping cart table">
    <table class="data-table">...</table>
  </section>
  <aside class="order-summary">...</aside>
</div>