css - Accelerated Mobile Page 和表格突出显示在屏幕上

Question

我在Wordpress中的网页使用了很多<table> </ table>，但是在手机中使用AMP（Accelerated Mobile Page）时，表格从屏幕中脱颖而出，变成了隐藏的内容。

当我使用响应式 CSS 时，我可以很容易地解决这个问题：

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

但 AMP 不起作用，感谢您的帮助。

标签： csshtml-tableresponsiveamp-html

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>