Why do the codes show underlines on the webpage but not in the browser's print?
This code is from the printOrder.blade.php file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8"/>
<title>Dispatch Note</title>
<link href="/ocadmin-asset/stylesheet/bootstrap.css" rel="stylesheet" media="screen"/>
<link href="/ocadmin-asset/stylesheet/fonts/fontawesome/css/all.min.css" rel="stylesheet" type="text/css"/>
<script src="/ocadmin-asset/javascript/jquery/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="/ocadmin-asset/javascript/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-print-css/css/bootstrap-print.min.css" media="print">
<style>
@media print {
@page {
size: A4;
margin: 0;
}
}
</style>
</head>
<body>
<div class="container" style="border: thin solid black;padding:0%">
<table class="table table-bordered" style="width:100%">
<tr>
<td>
Delivery Date<span class="text-decoration-underline">2022-01-01</span>
Day of week：<span class="text-decoration-underline">Wednesday</span>
Time：<span class="text-decoration-underline">12:30</span>
Name：<span class="text-decoration-underline">Adam Smith</span>
Mobile：<span style="text-decoration: underline !important;">0912-345678</span>
</td>
</tr>
</table>
</div>
</body>
</html>
On Chrome:
Webpage shows underlines https://i.sstatic.net/nZjVK.png
Printing has no underlines https://i.sstatic.net/jvoxq.png The last mobile number uses a custom style, not bootstrap's class.
Does this mean that bootstrap cannot be used for printing?