我有两个表,其列的宽度应该相同。尽管两者都设置为宽度:0.27in,但第一个表中的第一列呈现为 28px 宽,而另一列中的第一列呈现为 29px。我不知道为什么。
这是一个例子
http://isispro.com/render_error/
这是html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Isis Pro Gynecological Case List</title>
<link rel="stylesheet" href="print_gyn_style.css?v=1" media="screen">
</head>
<body>
<div id="header">
<table class="headerA pageHeader">
<tr>
<td class="headerLeft">
Candidate's Name: ernst schoen-rene<br />
Caselist Number: abog001
</td>
<td class="headerCenter">
<b>List of gynecological patients (main post-residency 12 months cases)</b>
</td>
<td class="headerRight">July 1, 2012 - September 30, 2012<br />
<span class="pageNum"></span>
</td>
</tr>
</table>
<p></p>
<table class="headerB">
<tr>
<td class="centerBottom col1">#</td>
<td class="centerBottom col2">H<br />o<br />s<br />p<br />#</td>
<td class="centerBottom col3">P<br />a<br />t<br />#</td>
<td class="centerBottom col4">A<br />g<br />e</td>
<td class="centerBottom col5">G<br />r<br />a<br />v</td>
<td class="centerBottom col6">P<br />a<br />r<br />a</td>
<td class="centerBottom col7">Diagnosis: Preoperative or Admission (include size of ovarian cysts)</td>
<td class="centerBottom col8">Treatment</td>
<td class="centerBottom col9">Surgical Pathology Diagnosis (Uterine wt. in gms.)</td>
<td class="centerBottom col10">Complications (include blood transfusions)</td>
<td class="centerBottom col11">Days in Hosp</td>
<td class="noBorder"> </td>
<td class="noBorder"></td>
<td class="noBorder"></td>
</tr>
</table>
</div>
<h2 class="">Abdominal hysterectomy, any type</h2>
<table class="cases">
<tr>
<td class="col1">1</td>
<td class="col2">A</td>
<td class="col3">A-1</td>
<td class="col4">12</td>
<td class="col5">1</td>
<td class="col6">15</td>
<td class="col7">fdsa fdsa</td>
<td class="col8">f ads</td>
<td class="col9">fd sa</td>
<td class="col10">fdsa</td>
<td class="col11">4</td>
<td class="noBorder"> </td>
<td class="noBorder"></td>
<td class="noBorder"></td>
</tr>
</table>
</body>
</html>
这是CSS:
@page {
margin: 2in 0.5in 0.5in 0.5in;
}
body, html {
font-family: arial, sans-serif;
font-size: 10pt;
}
h1,h2,h3 {
padding: 0;
}
#header {
/* position: fixed;
left: 0;
top: -1.5in; */
}
h1 {
font-size: 14pt;
margin: 1pt;
}
h2 {
font-size: 12pt;
margin: 3 0;
}
table {
word-wrap: break-word;
table-layout: fixed;
}
.pageBreak {
page-break-after: always;
height: 1px;
}
.pageHeader {
width: 10.15in;
}
.pageNum:before {
content: "Page " counter(page);
}
.headerLeft {
text-align: left;
}
.headerCenter {
text-align: center;
}
.headerRight {
text-align: right;
}
.headerB {
border-collapse: collapse;
width: 10.15in;
}
.headerB td {
border: 1px solid #000;
}
.headerB .centerBottom {
text-align: center;
vertical-align: bottom;
}
.headerB .leftBottom {
text-align: left;
vertical-align: bottom;
}
.cases {
border-collapse: collapse;
width: 10.15in;
}
.cases td {
vertical-align: top;
border: 1px solid #000;
}
.headerB .col1,
.headerB .col2,
.headerB .col4,
.headerB .col5,
.headerB .col6 {
width: 0.2700in;
text-align: center;
}
.cases .col1,
.cases .col2,
.cases .col4,
.cases .col5,
.cases .col6 {
width: 0.2700in;
text-align: center;
}
.headerB .col3,
.cases .col3 {
width: 0.35in;
}
.headerB .col7,
.headerB .col8,
.headerB .col9,
.headerB .col10 {
width: 1.37in;
}
.cases .col7,
.cases .col8,
.cases .col9,
.cases .col10 {
width: 1.44in;
}
.cases .col11,
.headerB .col11 {
width: 0.35in;
}
.headerB .noBorder,
.cases .noBorder {
border: none;
width: 0.35in;
}
.headerB .col12 {
width: 0.5in;
border: none;
background-color: #ccc;
}
.headerB .col13 {
width: 1in;
border: none;
background-color: #ccc;
}
.cases .coll12 {
width: 0.5in;
}
.cases .coll13 {
width: 1in;
}
.headerGray {
background-color: #ccc;
height: 0.85in;
}
.headerGray .leftBottom {
text-align: left;
vertical-align: bottom;
}
.headerGray .col1 {
width: 0.5in;
}
.headerGray .col2 {
width: 1in;
}
.categoryPlusOne {
/*page-break-before: always;*/
}