兩個看似相同的表格單元呈現不同的寬度

我有兩個表的列應該是相同的寬度。儘管兩者都被設置爲寬度：0.27英寸，但第一個表中的第一列呈現爲28px寬，而另一列中的第一列爲29px。我無法弄清楚爲什麼。兩個看似相同的表格單元呈現不同的寬度

下面是一個例子

這裏的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">&nbsp;</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">&nbsp;</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;*/ 
}

來源

2013-06-18 tito swineflu

我認爲這是調整，因爲你的更寬的列有不同兩張桌子之間的尺寸：

.headerB .col7, 
.headerB .col8, 
.headerB .col9, 
.headerB .col10 { 
    width: 1.37in; 
} 
.cases .col7, 
.cases .col8, 
.cases .col9, 
.cases .col10 { 
    width: 1.44in; 
}

當我使用Firebug將它們更改爲匹配對方時，其他列排成一行並匹配大小。另外，就像旁人一樣，你可能想要爲像素設置子點，因爲它看起來像是在爲打印設計。 ;）

來源

2013-06-18 16:28:09

是的，呃！謝謝。很多原因使用奇怪的數字是因爲我使用的PDF轉換器有很多錯誤，需要哄騙才能正常工作。 –

不用擔心 - 本週的每一天都像星期一一樣，所以我想一些星期一級的錯誤一定能夠通過。 –

兩個看似相同的表格單元呈現不同的寬度

回答

相關問題