Хочу помочь вам, замечательные люди, в том, чтобы персональный заказ прошел плавно пролистнуть [закрыто] ⇐ Php

[Anonymous]

Код: Выделить всё

// Add horizontal scroll for individual orders in My Account page, keeping the headers intact
add_action('wp_head', 'add_custom_individual_orders_scroll_with_headers_css');

function add_custom_individual_orders_scroll_with_headers_css() {
echo '

/* Ensure the table structure remains intact */
.woocommerce-MyAccount-content .woocommerce-orders-table {
display: table; /* Ensure the table layout is preserved */
width: 100%; /* Set the table width to full */
border-collapse: collapse; /* Ensure borders collapse properly */
}

/* Style the table headers */
.woocommerce-MyAccount-content .woocommerce-orders-table thead th {
text-align: left; /* Align headers to the left */
padding: 10px; /* Add padding to headers */
background-color: #f0f0f0; /* Background color for headers */
border-bottom: 2px solid #ddd; /* Border under headers */
}

/* Make each order row scrollable horizontally */
.woocommerce-MyAccount-content .woocommerce-orders-table__row {
display: table-row; /* Ensure rows remain part of the table layout */
overflow-x: auto; /* Enable horizontal scroll within each row */
}

/* Style each table cell */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell {
display: table-cell; /* Keep table-cell structure for each cell */
min-width: 150px; /* Set minimum width for each cell to prevent overlap */
padding: 10px; /* Add padding to each cell */
border-bottom: 1px solid #ddd; /* Add border between rows */
}

/* Adjust action buttons */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell .button {
margin-right: 5px; /* Space between buttons */
padding: 8px 12px; /* Increase padding */
white-space: nowrap; /* Prevent buttons from breaking into multiple lines */
}

/* Alternate row colors for better readability */
.woocommerce-MyAccount-content .woocommerce-orders-table__row:nth-child(even) {
background-color: #f9f9f9;
}

/* Hide the scrollbar for aesthetic reasons */
.woocommerce-MyAccount-content .woocommerce-orders-table::-webkit-scrollbar {
display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-orders-table__row {
display: block; /* Stack rows vertically on smaller screens */
}

.woocommerce-MyAccount-content .woocommerce-orders-table__cell {
display: block; /* Stack cells vertically on small screens */
min-width: 100%; /* Full width for each cell */
}
}

';
}

Я хочу изменить этот код, чтобы каждый запрос был отдельным. Клиент может прокручивать его по горизонтали, чтобы увидеть элементы действия. Как вы можете видеть на картинке, элементы действия расположены друг над другом. Я хочу сделать каждый запрос отдельным. Клиент может прокручивать его до тех пор, пока не увидит элементы действия по горизонтали.


Подробнее здесь: https://stackoverflow.com/questions/790 ... -pass-thro