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

Posted 2023-03-06

【中文标题】Accelerated Mobile Page 和表格突出显示在屏幕上

【英文标题】：Accelerated Mobile Page and tables stick out from the screen

【发布时间】：2019-05-20 08:23:41

【问题描述】：

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

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

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

但 AMP 无法正常工作，感谢您的帮助。

【参考方案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>