我有这个功能来格式化和打印
function printData() {
var divToPrint = document.getElementById('horario');
var htmlToPrint = '' +
'<style type="text/css">' +
'table label {' +
'position:relative;' +
'float:left;' +
'}' +
'table label {' +
'position:relative;' +
'float:left;' +
'text-align:center;' +
'width:100%;' +
'}' +
'table th, table td {' +
'border:1px solid #000;' +
'width:100%;' +
'float:center;' +
'float:center;' +
'float:center;' +
'padding;0.5em;' +
'}' +
'table th:first-child {' +
'position:relative;' +
'float:left;' +
'width:95%;' +
'}' +
'table td:first-child {' +
'position:relative;' +
'float:left;' +
'width:10%;' +
'}' +
'table .semana1 {' +
'position:relative;' +
'width:100px;' +
'}' +
'table .semana {' +
'position:relative;' +
'float:left;' +
'width:20%;' +
'}' +
'table .sala {' +
'position:relative;' +
'float:left;' +
'width:20%;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
和这个html
<button id="button8" class="myButton5" onclick="printData()" title="Imprimir"><span title="Imprimir" class="fa fa-print fa-lg"></span> Imprimir</button>
<div id="tablediv">
<table id="horario" cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
<!-- Table Header -->
<head>
<tr>
<th>Horas</th>
<th class="semana1">Segunda</th>
<th class="sala1">Sala</th>
<th class="semana1">Terça</th>
<th class="sala1">Sala</th>
<th class="semana1">Quarta</th>
<th class="sala1">Sala</th>
<th class="semana1">Quinta</th>
<th class="sala1">Sala</th>
<th class="semana1">Sexta</th>
<th class="sala1">Sala</th>
</tr>
</head>
<!-- Table Header -->
<!-- Table Body -->
<body>
<!-- Table Row -->
<tr class="morning">
<td><label id="InputHora1"></label><label id="InputHora2"></label></td>
<td><label id="bloco10" class="semana"></label></td>
<td><label id="sala10" class="sala"></label></td>
<td><label id="bloco21" class="semana"></label></td>
<td><label id="sala21" class="sala"></label></td>
<td><label id="bloco32" class="semana"></label></td>
<td><label id="sala32" class="sala"></label></td>
<td><label id="bloco43" class="semana"></label></td>
<td><label id="sala43" class="sala"></label></td>
<td><label id="bloco54" class="semana"></label></td>
<td><label id="sala54" class="sala"></label></td>
</tr>
<!-- Darker Table Row -->
<tr class="even morning">
<td><label id="InputHora3"></label><label id="InputHora4"></label></td>
<td>
<label id="bloco60"></label>
</td>
<td><label id="sala60"></label></td>
<td>
<label id="bloco71"></label>
</td>
<td><label id="sala71"></label></td>
<td>
<label id="bloco82"></label>
</td>
<td><label id="sala82"></label></td>
<td>
<label id="bloco93"></label>
</td>
<td><label id="sala93"></label></td>
<td>
<label id="bloco104"></label>
</td>
<td><label id="sala104"></label></td>
</tr>
<tr class="morning">
<td><label id="InputHora5"></label><label id="InputHora6"></label></td>
<td>
<label id="bloco110"></label>
</td>
<td><label id="sala110"></label></td>
<td>
<label id="bloco121"></label>
</td>
<td><label id="sala121"></label></td>
<td>
<label id="bloco132"></label>
</td>
<td><label id="sala132"></label></td>
<td>
<label id="bloco143"></label>
</td>
<td><label id="sala143"></label></td>
<td>
<label id="bloco154"></label>
</td>
<td><label id="sala154"></label></td>
</tr>
<tr class="even morning">
<td><label id="InputHora7"></label><label id="InputHora8"></label></td>
<td>
<label id="bloco160"></label>
</td>
<td><label id="sala160"></label></td>
<td>
<label id="bloco171"></label>
</td>
<td><label id="sala171"></label></td>
<td>
<label id="bloco182"></label>
</td>
<td><label id="sala182"></label></td>
<td>
<label id="bloco193"></label>
</td>
<td><label id="sala193"></label></td>
<td>
<label id="bloco204"></label>
</td>
<td><label id="sala204"></label></td>
</tr>
<tr class="morning">
<td><label id="InputHora9"></label><label id="InputHora10"></label></td>
<td>
<label id="bloco210"></label>
</td>
<td><label id="sala210"></label></td>
<td>
<label id="bloco221"></label>
</td>
<td><label id="sala221"></label></td>
<td>
<label id="bloco232"></label>
</td>
<td><label id="sala232"></label></td>
<td>
<label id="bloco243"></label>
</td>
<td><label id="sala243"></label></td>
<td>
<label id="bloco254"></label>
</td>
<td><label id="sala254"></label></td>
</tr>
<tr class="even morning">
<td><label id="InputHora11"></label><label id="InputHora12"></label></td>
<td>
<label id="bloco260"></label>
</td>
<td><label id="sala260"></label></td>
<td>
<label id="bloco271"></label>
</td>
<td><label id="sala271"></label></td>
<td>
<label id="bloco282"></label>
</td>
<td><label id="sala282"></label></td>
<td>
<label id="bloco293"></label>
</td>
<td><label id="sala293"></label></td>
<td>
<label id="bloco304"></label>
</td>
<td><label id="sala304"></label></td>
</tr>
<tr class="morning">
<td><label id="InputHora13"></label><label id="InputHora14"></label></td>
<td>
<label id="bloco310"></label>
</td>
<td><label id="sala310"></label></td>
<td>
<label id="bloco321"></label>
</td>
<td><label id="sala321"></label></td>
<td>
<label id="bloco332"></label>
</td>
<td><label id="sala332"></label></td>
<td>
<label id="bloco343"></label>
</td>
<td><label id="sala343"></label></td>
<td>
<label id="bloco354"></label>
</td>
<td><label id="sala354"></label></td>
</tr>
<tr class="even morning">
<td><label id="InputHora15"></label><label id="InputHora16"></label></td>
<td>
<label id="bloco360"></label>
</td>
<td><label id="sala360"></label></td>
<td>
<label id="bloco371"></label>
</td>
<td><label id="sala371"></label></td>
<td>
<label id="bloco382"></label>
</td>
<td><label id="sala382"></label></td>
<td>
<label id="bloco393"></label>
</td>
<td><label id="sala393"></label></td>
<td>
<label id="bloco404"></label>
</td>
<td><label id="sala404"></label></td>
</tr>
<tr class="morning night">
<td><label id="InputHora17"></label><label id="InputHora18"></label></td>
<td>
<label id="bloco410"></label>
</td>
<td><label id="sala410"></label></td>
<td>
<label id="bloco421"></label>
</td>
<td><label id="sala421"></label></td>
<td>
<label id="bloco432"></label>
</td>
<td><label id="sala432"></label></td>
<td>
<label id="bloco443"></label>
</td>
<td><label id="sala443"></label></td>
<td>
<label id="bloco454"></label>
</td>
<td><label id="sala454"></label></td>
</tr>
<tr class="even morning night">
<td><label id="InputHora19"></label><label id="InputHora20"></label></td>
<td>
<label id="bloco460"></label>
</td>
<td><label id="sala460"></label></td>
<td>
<label id="bloco471"></label>
</td>
<td><label id="sala471"></label></td>
<td>
<label id="bloco482"></label>
</td>
<td><label id="sala482"></label></td>
<td>
<label id="bloco493"></label>
</td>
<td><label id="sala493"></label></td>
<td>
<label id="bloco504"></label>
</td>
<td><label id="sala504"></label></td>
</tr>
<tr class="morning night">
<td><label id="InputHora21"></label><label id="InputHora22"></label></td>
<td>
<label id="bloco510"></label>
</td>
<td><label id="sala510"></label></td>
<td>
<label id="bloco521"></label>
</td>
<td><label id="sala521"></label></td>
<td>
<label id="bloco532"></label>
</td>
<td><label id="sala532"></label></td>
<td>
<label id="bloco543"></label>
</td>
<td><label id="sala543"></label></td>
<td>
<label id="bloco554"></label>
</td>
<td><label id="sala554"></label></td>
</tr>
<tr class="even morning night">
<td><label id="InputHora23"></label><label id="InputHora24"></label></td>
<td>
<label id="bloco560"></label>
</td>
<td><label id="sala560"></label></td>
<td>
<label id="bloco571"></label>
</td>
<td><label id="sala571"></label></td>
<td>
<label id="bloco582"></label>
</td>
<td><label id="sala582"></label></td>
<td>
<label id="bloco593"></label>
</td>
<td><label id="sala593"></label></td>
<td>
<label id="bloco604"></label>
</td>
<td><label id="sala604"></label></td>
</tr>
</body>
<!-- Table Body -->
</table>
但我似乎无法做到正确，我想像this
这样的学校时间表格式化corrent layout我提出的css代码不起作用，我不知道为什么？
答案 0 :(得分：0)
我认为最好的方法是使用print css：http://www.webcredible.com/blog/print-stylesheet-definitive-guide/
创建打印样式并使用Firefox打印仿真调试（例如）。您可以按Shift + F2激活打印仿真，然后输入媒体模拟打印＆＃39;
