Css 两个看似相同的表格单元以不同的宽度渲染_Css

Css 两个看似相同的表格单元以不同的宽度渲染

css

Css 两个看似相同的表格单元以不同的宽度渲染,css,Css,我有两个表，它们的列应该是相同的宽度。尽管两者都设置为宽度：0.27in，但第一个表中的第一列呈现为28px宽，另一个表中的第一列呈现为29px宽。我不明白为什么这里有一个例子以下是html： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Isis Pro Gynecological Case List</title

我有两个表，它们的列应该是相同的宽度。尽管两者都设置为宽度：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>

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

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

当我使用Firebug将它们更改为相互匹配时，其他列会对齐并匹配大小

另外，作为旁白，您可能希望为像素设置子点，因为它看起来是为打印而设计的。；）

是的，嗯！谢谢之所以使用奇怪的数字，很大程度上是因为我使用的pdf转换器有很多错误，需要哄骗才能正常工作。不用担心，这周的每一天都感觉像是星期一，所以我想一些星期一级别的错误肯定会解决。

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