响应式 table html - 内联产品标题

Question

我正在开发一个 e-commerce 网站，在购物车页面中我有一个 table，用户可以在其中找到他添加到购物车中的所有商品，但是当我显示手机网站购物车 table 中的所有信息都过于压缩，所以我想将产品名称放在 CSS 中的图片下方。如果有人可以帮助我，那就太好了。

<div class="container-table-cart pos-relative">
        <div class="wrap-table-shopping-cart bgwhite">
          <table class="table-shopping-cart">
            <tr class="table-head">
              <th class="column-1"></th>
              <th class="column-2">{{ 'cart.general.heading_product_name' | t }}</th>
              <th class="column-3">{{ 'cart.general.heading_unit_price' | t }}</th>
              <th class="column-4 p-l-70">{{ 'cart.general.heading_quantity' | t }}</th>
              <th class="column-5">{{ 'cart.general.heading_total' | t }}</th>
            </tr>
            {% for item in cart.items %}
            <tr class="table-row" data-line="{{ forloop.index }}">
              <td class="column-1">
                <div class="cart-img-product b-rad-4 o-f-hidden">
                  <a href="{{ item.url }}">
                    <img src="{{ item | img_url: '90x120' }}"  alt="{{ item.title | escape }}" title="{{ item.title | escape }}" class="" />
                  </a>
                </div>
              </td>
              <td class="column-2">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
                {% unless item.variant.title contains 'Default' %}
                <br />
                <small>{{ item.variant.title }}</small>
                {% endunless %}

                {% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
                {% assign date = item.variant.next_incoming_date | date: format: 'month_day_year' %}
                <br />
                <small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small>
                {% endif %}

                {% assign property_size = item.properties | size %}
                {% if property_size > 0 %}
                {% for p in item.properties %}
                {% if forloop.first %}<br>{% endif %}
                {% unless p.last == blank %}
                {{ p.first }}:

                {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                {% else %}
                {{ p.last }}
                {% endif %}

                <br>
                {% endunless %}
                {% endfor %}
                {% endif %}
              </td>
              <td class="column-3">{{ item.price | money }}</td>
              <td class="column-4">
                <div class="flex-w bo5 of-hidden w-size17">
                  <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                  </button>
                  <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" class="size8 m-text18 t-center num-product" data-line="{{ forloop.index }}">
                  <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>
              </td>
              <td class="column-5">{{ item.line_price | money }}</td>
            </tr>
            {% endfor %}
          </table>

Answer 1

你可以做的是使用媒体查询

您可以将标题与图片放在同一列中，但在标题元素上保留 display:none 直到达到移动尺寸，在这种情况下您会再次显示它，但是 display:none另一列中的标题。

示例：

<td class=“column1”>
<img>
<div class=“title”>Title here</div>
</td>

<td class=“column2”>
<div class=“col2title”>Title here</div>
</td>

@media only screen and (max-width: 600px) {
.title {
display: block;
}
.column2{
display:none;
}
}

Answer 2

您可以尝试这样做：

.table-center {
  text-align: center;
  vertical-align: center;
}

table a {
  text-decoration: none;
  color: black;
  display: block;
}

.table-center td {
  width: 300px;
}

@media only screen and (min-width: 300px) and (max-width: 723px) {
  .table-center td > input {
    width: 100px;
  }
  
  .table-center img {
    width: 50px;
    height: auto;
  }
  
  .table-center a {
    font-size: 0.8rem;
  }
}

<table class="table-center">
  <tr>
    <th>Prix</th>
    <th>Unitare</th>
    <th>Total</th>
  <tr>
  <tr>
    <td>
      <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
      <a href="#">FENTY BEAUTY - Gloss Bomb Stunna</a>
    </td>
    <td>
      .99
    </td>
    <td>
      <input type="number">
    </td>
  </tr>
</table>

此外，这里有一个 working example :)

响应式 table html - 内联产品标题

Responsive table html - inline product title

html

css

html-table

responsive