Question

我有两个表，其列的宽度应相同。尽管两者都被设置为宽度：0.27in，但第一个表中的第一列呈现为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;*/
}

Answer 1

我认为它正在调整，因为更宽的列在两个表之间有不同的大小：

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

当我使用Firebug将它们更改为彼此匹配时，其他列排列并匹配大小。

另外，除了旁边之外，你可能想要像素的子点，因为看起来你正在设计打印。 ;）

两个看似相同的表格单元格呈现不同的宽度

1 个答案: