jquery - 如何设置响应移动的html表格

Question

<style>
    
   @media only screen and (max-width: 417px) {
    table {
        display: block;
    }
}
  table, thead, tbody, tfoot, tr, th, td {
    display: block; /* Set all of our table elements to display type block */
}
 
/* And here we will set our table to act normally after we hit 1024px */
@media only screen and (min-width: 1024px) {
    table { display: table; }
    thead { display: table-header-group; }
    tbody { display: table-row-group; }
    tfoot { display: table-footer-group; }
    tr { display: table-row; }
    th, td { display: table-cell; }
}  
    
 td:first-child {
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 10px;
}
 
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    padding: 10px;
}
 
td {
    padding: 15px;
    margin: 15px;
    border: 1px solid #ddd;
}   
    
    
    </style>

您好，我正在从事 bigcommerce，这是我的购物车代码，我想帮助使购物车内容在移动设备的小屏幕上响应 我想知道是否可以使 html 表格响应移动设备，它看起来不错选项卡，但不是在移动设备上，提前谢谢您

<tr>
        <td class="CartThumb" style="%%GLOBAL_HideThumbColumn%%">
            %%GLOBAL_ProductImage%%&nbsp;
        </td>
        <td class="ProductName" colspan="%%GLOBAL_ProductNameSpan%%">
            <a href="%%GLOBAL_ProductLink%%">%%GLOBAL_ProductName%%</a>%%GLOBAL_ProductOptions%%
            <br>
            %%GLOBAL_ProductAvailability%%
            <div class="CartExpectedReleaseDate" style="%%GLOBAL_HideExpectedReleaseDate%%">(%%GLOBAL_ProductExpectedReleaseDate%%)</div>
            %%GLOBAL_EventDate%%
            <div style="%%GLOBAL_HideWrappingOptions%%" class="WrappingOptions">
                %%LNG_GiftWrapping%%:
                %%GLOBAL_GiftWrappingName%%
                <a href="#" onclick="Cart.ManageGiftWrapping('%%GLOBAL_CartItemId%%');" style="%%GLOBAL_HideGiftWrappingAdd%%">%%LNG_Add%%</a>
                <span style="%%GLOBAL_HideGiftWrappingEdit%%">
                    (<a href="#" onclick="Cart.ManageGiftWrapping('%%GLOBAL_CartItemId%%');">%%LNG_Change%%</a> %%LNG_Or%% <a href="cart.php?action=remove_giftwrapping&amp;item_id=%%GLOBAL_CartItemId%%" onclick="return Cart.RemoveGiftWrapping();">%%LNG_Remove%%</a>)
                </span>
                <br>
                <span style="%%GLOBAL_HideGiftMessagePreview%%">
                    %%LNG_GiftMessage%%:
                    %%GLOBAL_GiftMessagePreview%%
                </span>
            </div>
        </td>
        <td align="center" class="CartItemQuantity">
            %%GLOBAL_CartItemQty%%

        </td>
        <td align="center" class="CartItemIndividualPrice">
            %%GLOBAL_ProductPrice%%
        </td>
        <td align="right" class="CartItemTotalPrice"><em class="ProductPrice">%%GLOBAL_ProductTotal%%</em>

        </td>

        <td>
             <div style="%%GLOBAL_HideCartItemRemove%%">


                <a href="cart.php?action=remove&amp;item=%%GLOBAL_CartItemId%%" onclick="Cart.RemoveItem('%%GLOBAL_CartItemId%%'); return false;" class="CartRemoveLink" title="%%LNG_Remove%%">&nbsp;</a>
            </div>
        </td>        


    </tr>

设置 HTML 表格响应移动

Answer 1

使用 CSS 设置样式，将表格的宽度应用为 % 将使其在某种意义上具有响应性。调整屏幕大小，它会缩小。但是，它可能会变得局促，在这种情况下，您可以使用媒体查询在屏幕缩小到某个点时设置不同样式的断点。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp