1

列が同じ幅である必要がある 2 つのテーブルがあります。両方とも width: 0.27in に設定されていますが、最初のテーブルの列 1 は 28 ピクセル幅でレンダリングされ、もう一方の列 1 は 29 ピクセルでレンダリングされます。理由がわかりません。

ここに例があります

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">&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;*/
}
4

1 に答える 1

0

幅の広い列のサイズが 2 つのテーブル間で異なるため、調整していると思います。

.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-18T16:28:09.577 に答える