Question

背景

我正在尝试克隆表的某些部分并将克隆覆盖在原始表的顶部，以便在滚动时创建在页面上固定的标题。我正在使用jQuery插件：datatables FixedHeader的修改版本来执行此操作。我试过了FixedColumns，但它没有按我想要的方式工作。

我有上述工作，除了克隆表没有与源表正确对齐。例如顶部标题的单元格比实际表格中的单元格要窄。

我已经尝试像原始的FixedHeader代码那样设置单元格的宽度，但这似乎没有任何效果。另外，如果在Firebug的Layout选项卡中手动设置宽度，它会更新HTML视图中元素中的style =“width：blah”，但实际上不会更改单元格的宽度。

问题

如何在第二个表格中设置单元格的宽度以匹配原始表格中单元格的宽度，以便在将第二个表格放在第一个表格的顶部时它们排成一行。

对于上述更简单的版本，请考虑以下代码。即使我已经明确设置了两个表中前两个th元素的宽度，但第二个表的单元格太窄了。我不想指定原始表中单元格的宽度。我只想在第二个表中设置单元格的宽度以匹配第一个。我该怎么做？

<html>
  <head>
    <title>Layout</title>
<style type="text/css">
td, th {
    text-align: center;
    border: 1px solid #bbb;
    padding: 0px 1px;
    font-size: 1.2em;
    color: #555;
}
th {
    font-weight: normal;
}
th.colhead {
    background-color: #ccc;
}
th.reference {
    white-space: nowrap;
    font-size: 100%;
}
th.rowhead {
    white-space: nowrap;
    text-align: left;
    padding: 0px 0px 0px 10px;
}
th.cathead {
    text-align: left;
    background-color: #ddd;
    padding: 0px 0px 0px 6px;
    font-weight: bold;
}
tr {
    height: 31px;
}
tr.even {
    background-color: #eee;
}
</style>
  </head>
<body>
  <div id="source">
    <table>
      <thead>
        <tr>
          <th class="colhead" style="width:156px">Test Name</th>
          <th class="colhead" style="width:102px">Reference Range</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rowhead">This is the test</th>
          <th class="rowhead">123 - 456</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>0</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="thead_clone">
    <table>
      <thead>
        <tr>
          <th class="colhead" style="width:156px">Test Name</th>
          <th class="colhead" style="width:102px">Reference Range</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

编辑：我发现对于上面的代码，将第二个table的宽度设置为与第一个table相同可以解决问题，但在我的实际代码中，单元格是仍然是错误的宽度。我如何找出问题所在以及如何解决问题？

Answer 1

在您的示例中，您在第一个表中以精确的宽度设置了两列。这导致第二个表的前两列变得“太窄”，因为它们的宽度是相对的而不是绝对的，因此浏览器会计算它们与其他列的比较宽度。

您的选择很简单：将两个表格列设置为具有精确宽度，或者两者都设置为不具有精确宽度。否则，总会有差异。如果不这样做（对于两者），标题列的宽度也取决于它们下面的行中单元格的宽度，这取决于它们中的内容。这意味着要么你不使用精确的宽度，你必须使两个表在内容方面完全相同（所以两个整个表），或者你为两者指定精确的列宽，在这种情况下你只能使用第二个表的标题行。

如果我必须处理这个，我会说生成一个表并使用jQuery或MooTools来制作重复的标题列。那么你查询DOM，复制，粘贴，设置宽度。

HTML布局 - 使单独表格中的单元格尺寸匹配

背景

问题

1 个答案: