chromium/chrome/browser/resources/commerce/product_specifications/table.html

<style include="cr-icons cr-hidden-style">
  :host {
    --column-width: 220px;
    --last-column-overflow-x: visible;
    --table-gap: 8px;
    --detail-container-margin-bottom: 24px;
  }

  #table {
    container-type: inline-size;
    display: grid;
    font-size: 12px;
    gap: var(--table-gap);
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--num-columns), var(--column-width));
    grid-template-rows: auto;
    line-height: 16px;
    width: fit-content;
  }

  .col {
    display: grid;
    grid-template-rows: subgrid;
    width: var(--column-width);
  }

  .col:last-of-type {
    overflow-x: var(--last-column-overflow-x);
  }

  .col[is-dragging] {
    background-color: var(
        --color-product-specifications-summary-background-dragging);
    z-index: 2;
  }

  product-selector {
    width: var(--column-width);
  }

  .img-container {
    height: 123px;
    margin-bottom: 16px;
    margin-top: 6px;
    position: relative;
  }

  .main-image {
    background-color: white;
    border: 1px solid var(--color-sys-base-container);
    border-radius: 8px;
    box-sizing: border-box;
    height: 100%;
    padding: 8px 0;
    object-fit: contain;
    width: var(--column-width);
  }

  .favicon {
    background-repeat: no-repeat;
    background-position: center;
  }

  .open-tab-button {
    --cr-icon-button-fill-color: var(--color-product-specifications-icon);
    --cr-icon-button-icon-size: 16px;
    --cr-icon-button-margin-end: 0;
    --cr-icon-button-size: 20px;
    position: absolute;
    right: 11px;
    top: 11px;
    z-index: 1;
  }

  .detail-container {
    display: flex;
    flex-direction: column;
    gap: var(--table-gap);
    width: var(--column-width);
  }

  .detail-text {
    margin-bottom: var(--detail-container-margin-bottom);
  }

  .detail-title {
    border-bottom: 1px solid var(--color-product-specifications-divider);
    font-weight: 500;
    padding-bottom: 4px;
    padding-inline-end: 50px;
    width: var(--column-width);
  }

  /*
   * Ensure the 'detail-title' element within the first column
   * spans the full container width, allowing its nested sticky span
   * to remain positioned correctly even when the column is scrolled
   * away from.
   */
  .col[is-first-column] .detail-title {
    padding-inline-end: var(--table-gap);
    width: 100cqw;
  }

  .col[is-first-column] .detail-title span {
    left: 0;
    position: sticky;
  }

  .col:not([is-first-column]) .detail-title span {
    visibility: hidden;
  }
</style>

<div id="table" on-pointerleave="onHideOpenTabButton_">
  <template is="dom-repeat" id="columnRepeat" items="[[columns]]"
      as="column" index-as="columnIndex">
    <div class="col"
        style$="grid-row: span [[getRowCount_(column.productDetails.length)]];
            scroll-snap-align: [[getScrollSnapAlign_(draggingColumn)]];"
        on-pointerenter="onShowOpenTabButton_"
        is-dragging$="[[isDragging_(columnIndex, draggingColumn)]]"
        is-first-column$="[[isFirstColumn_(columnIndex, draggingColumn)]]">
      <product-selector
          draggable="true"
          selected-item="[[column.selectedItem]]"
          excluded-urls="[[getUrls_(columns)]]"
          on-selected-url-change="onSelectedUrlChange_"
          on-remove-url="onUrlRemove_">
      </product-selector>
      <div class="img-container" draggable="true">
        <template is="dom-if"
            if="[[column.selectedItem.imageUrl.length]]">
          <img class="main-image" is="cr-auto-img"
              auto-src="[[column.selectedItem.imageUrl]]"
              draggable="false">
        </template>
        <template is="dom-if"
            if="[[!column.selectedItem.imageUrl.length]]">
          <div class="main-image favicon"
              style="background-image:
                  [[getFavicon_(column.selectedItem.url)]]">
          </div>
        </template>
        <cr-icon-button class="open-tab-button icon-external"
            hidden$="[[!showOpenTabButton_(columnIndex,
                draggingColumn, hoveredColumnIndex_)]]"
            on-click="onOpenTabButtonClick_">
        </cr-icon-button>
      </div>
      <template is="dom-repeat" items="[[column.productDetails]]" as="detail"
          index-as="rowIndex">
        <div class="detail-container"
            hidden$="[[!showRow_(detail.title, rowIndex)]]">
          <template is="dom-if" if="[[detail.title]]">
            <div class="detail-title">
              <span>[[detail.title]]</span>
            </div>
          </template>
          <template is="dom-if" if="[[contentIsString_(detail.content)]]">
            <div class="detail-text">[[detail.content]]</div>
          </template>
          <template is="dom-if"
              if="[[contentIsProductDescription_(detail.content)]]">
            <description-section
                description="[[filterProductDescription_(detail.content,
                    detail.title, rowIndex)]]"
                product-name="[[column.selectedItem.title]]">
            </description-section>
          </template>
          <template is="dom-if"
              if="[[contentIsBuyingOptionsLink_(detail.content)]]">
            <buying-options-section jackpot-url="[[detail.content.jackpotUrl]]">
            </buying-options-section>
          </template>
        </div>
      </template>
    </div>
  </template>
</div>