Ускоренная мобильная страница и таблицы торчат с экрана

Question

Мои веб-страницы в Wordpress используют много <table> </ table>, но когда AMP (Ускоренная мобильная страница) используется на мобильных устройствах, таблица выделяется на экране, превращаясь в скрытый контент.

Когда я использовал адаптивный CSS, я мог легко решить это с помощью:

 @media screen and (max-width: 479px)
.table {
     width: 100%;
}

, но с AMP не работает, я ценю вашу помощь.

Answer 1

Рассматривали ли вы использование библиотеки http://datatables.net?Это может помочь решить проблему.

Вот пример:

$(document).ready( function () {

	$('.data-table').DataTable( {
		responsive: true,
        deferRender:    true,
        scrollY:        320,
        scroller:       true
	});
	
});

table { background: #f2f2f2; }
table thead tr { background: #ccc; }
table thead tr th:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fh-3.1.4/r-2.2.2/sc-1.5.0/datatables.min.js"></script>

<!-- https://datatables.net/ -->

<table id="myInvoicesTable" class="data-table" data-order='[[ 1, "desc" ]]'> 
	<thead>
		<tr>
			<th class="table-th--type">Type</th>
			<th class="table-th--date" data-type="date" data-format="YYYY/MM/DD">Created</th>
			<th class="table-th--date" data-type="date" data-format="YYYY/MM/DD">Due</th>
			<th class="table-th--total" data-type="number">Total</th>
			<th class="table-th--status" data-type="number">Status</th>
			<th class="table-th--action">Action</th>
		</tr>
	</thead>
	<tbody>
		
		
		
		
		<!-- Invoices 
		**************************** -->
		<tr class="table-tr--status status--invoice-overdue">
			<td class="table-td--type">
				<div>
					<i class="material-icons">description</i>
					<span>Invoice</span>
					<span>#00001</span>
				</div>
			</td>
			<td class="table-td--date">11/11/2018</td>
			<td class="table-td--date">11/14/2018</td>
			
			<td class="table-td--total">
				<div>
					<span class="total-usd">$5.27</span>
					<span class="total-btc">0.00100000</span>
				</div>
			</td>
			<td class="table-td--status">Paid</td>
			<td class="table-td--action">
				<a href="#" class="mdc-button mdc-button--unelevated button--action-viewinvoice">View</a>
			</td>
		</tr>
		
		
		
		<tr class="table-tr--status status--invoice-due">
			<!-- Type -->
			<td class="table-td--type">
				<div>
					<i class="material-icons">description</i>
					<span>Invoice</span>
					<span>#00001</span>
				</div>
			</td>
			<td class="table-td--date">11/11/2018</td>
			<td class="table-td--date">11/14/2018</td>
			<td class="table-td--total">
				<div>
					<span class="total-usd">$5.27</span>
					<span class="total-btc">0.00100000</span>
				</div>
			</td>
			<td class="table-td--status">Paid</td>
			<td class="table-td--action">
				<a href="#" class="mdc-button mdc-button--unelevated button--action-viewinvoice">View</a>
			</td>
		</tr>
		<tr class="table-tr--status status--invoice-paid">
			<!-- Type -->
			<td class="table-td--type">
				<div>
					<i class="material-icons">description</i>
					<span>Invoice</span>
					<span>#00001</span>
				</div>
			</td>
			<td class="table-td--date">11/11/2018</td>
			<td class="table-td--date">11/14/2018</td>
			<td class="table-td--total">
				<div>
					<span class="total-usd">$5.27</span>
					<span class="total-btc">0.00100000</span>
				</div>
			</td>
			<td class="table-td--status">Paid</td>
			<td class="table-td--action">
				<a href="#" class="mdc-button mdc-button--unelevated button--action-viewinvoice">View</a>
			</td>
		</tr>
		
		<!-- Credits 
		**************************** -->
		<tr class="table-tr--status status--prepay-paid">
			<!-- Type -->
			<td class="table-td--type">
				<div>
					<i class="material-icons mdi mdi-coin"></i>
					<span>PrePay</span>
					<span>#00004</span>
				</div>
			</td>
			<td class="table-td--date">11/11/2018</td>
			<td class="table-td--date">11/14/2018</td>
			<td class="table-td--total">
				<div>
					<span class="total-usd">$5.27</span>
					<span class="total-btc">0.00100000</span>
				</div>
			</td>
			<td class="table-td--status">Paid</td>
			<td class="table-td--action">
				<a href="#" class="mdc-button mdc-button--unelevated button--action-viewinvoice">View</a>
			</td>
		</tr>
		<tr class="table-tr--status status--prepay-canceled">
			<!-- Type -->
			<td class="table-td--type">
				<div>
					<i class="material-icons mdi mdi-coin"></i>
					<span>PrePay</span>
					<span>#00005</span>
				</div>
			</td>
			<td class="table-td--date">11/11/2018</td>
			<td class="table-td--date">11/14/2018</td>
			<td class="table-td--total">
				<div>
					<span class="total-usd">$5.27</span>
					<span class="total-btc">0.00100000</span>
				</div>
			</td>
			<td class="table-td--status">Paid</td>
			<td class="table-td--action">
				<a href="#" class="mdc-button mdc-button--unelevated button--action-viewinvoice">View</a>
			</td>
		</tr>
		
		
		
	</tbody>
</table>