我嘗試了各種對齊設定，但沒有任何區別。請查看下圖中最右側的列，并注意與左側的列相比，價格向下移動。
請注意，這是列印預覽
這就是不列印時網頁上同一張表的樣子。
您可以在網頁中看到，我已將最后一列的邊距設定為mt-0。
這是我的代碼：
<div >
<div >
<button onclick="printDiv()">Print</button>
</div>
</div>
<div id="PrintDiv">
<div >
<div >
<div >
<p>
<h2>@ViewBag.FullName</h2>
<h4>Order History</h4>
</p>
</div>
<div >
<img src="@(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" )
style="max-height:75px;width:auto" alt="ASP.Net Core 5 Print Div 垂直對齊問題" />
</div>
</div>
<table >
<thead>
<tr>
<th>Date</th>
<th>Order ID</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
@foreach (var order in Model)
{
<tr>
<td >@order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td >@order.Id</td>
<td >
<ul style="list-style-type:none">
@foreach (var item in order.OrderItems)
{
<li>
<div role="alert">
<span >@item.Amount</span> [@item.Price.ToString("c")] - @item.Product.Name
</div>
</li>
}
</ul>
</td>
<td >@order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@section Scripts{
<script type="text/javascript">
function printDiv() {
var divContents = document.getElementById("PrintDiv").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
}
有沒有人有任何建議可以使Total列與其他列正確對齊？
uj5u.com熱心網友回復：
我在發布問題后不久就發現了問題。我意識到頁面的列印版本無法識別這些Bootstrap類。因此，我更改了所有列以inline styles用于對齊。
<tbody>
@foreach (var order in Model)
{
<tr>
<td style="vertical-align:text-top">@order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td style="vertical-align:text-top">@order.Id</td>
<td style="vertical-align:text-top">
<ul style="list-style-type:none">
@foreach (var item in order.OrderItems)
{
<li>
<div role="alert">
<span >@item.Amount</span> [@item.Price.ToString("c")] - @item.Product.Name
</div>
</li>
}
</ul>
</td>
<td style="vertical-align:text-top">@order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/394414.html