Below is the code I am using to display a table within my application:
var elementToPrint = this.mainTable.get(0);
newWin = window.open("");
newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>' +
'</head><body class=\'visible-print\'>');
newWin.document.write(elementToPrint.outerHTML);
newWin.print();
newWin.close();
The variable `this.mainTable` is a jQuery object.
In my common page (_Layout.cshtml) I have:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>MyApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="all">
<link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="all">
</head>
The printing function works fine, but it loses all styles, displaying unformatted text data (side by side). I want to maintain the original bootstrap layout with colors, borders, and stripes. What changes should be made?
Thank you.