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

【问题标题】：HTML layout - making dimensions of cells in separate tables matchHTML 布局 - 使单独表格中的单元格尺寸匹配
【发布时间】：2016-12-06 01:37:39
【问题描述】：

背景

我正在尝试克隆表格的一部分并将克隆覆盖在原始表格的顶部，以便在滚动时创建固定在页面上的标题。我正在使用 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 相同可以解决问题，但在我的实际代码中，单元格的宽度仍然错误.如何找出问题所在以及如何解决？

【问题讨论】：

几个月前我遇到了同样的问题，但找不到任何简单的解决方案...
是否可以选择使用 jQuery 插件？ archive.plugins.jquery.com/project/floatHeader
比关于 jQuery 插件的问题更广泛，使用 JavaScript 可以吗？我不认为没有 JS 可以解决这个问题。
是的，我目前正在使用带有 FixedHeader "extra" (datatables.net/extras/fixedheader) 的 datatables.net jQuery 插件，我已将其修改为在左侧冻结 2 列而不是仅 1 列，并冻结左上角的单元格也是如此。
js/jquery，或者不是（我已经测试了很多这些解决方案），如果你想要像素精度，那就太糟糕了。即使您为每列使用固定宽度，列宽也会根据单元格内容而变化。

标签： html css layout datatables html-table

【解决方案1】：

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

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

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

【讨论】：

谢谢，正如我在问题结束时所说，我不想指定第一个表格中单元格的确切宽度。我确实想查询 dom 并设置第二个表中单元格的宽度，以便它们与第一个表匹配。但是，当我尝试这样做时，无论是通过使用 Firebug 手动编辑宽度，还是使用 Javascript（在我的破解版 datatables.net/extras/fixedheader 中），它实际上并没有改变第二个表格中单元格的宽度。
你能设置一个 jsfiddle 来更好地说明这一点吗？因为 html + css 并没有显示这个，真的。我一直在用 MooTools 做一些花哨的定位/克隆东西，并且在像素上有一些差异，但我总是可以解决它们，因为它们是边框、填充等的结果 - 通常是 css 样式。
是的 js 摆弄它，它应该改变宽度（你有没有尝试将表格布局设置为固定？）。 kasimir 你能告诉我们你的解决方案吗？因为我的（来自drupal核心的固定标头的修改版本）还可以，但是像素更多/更少取决于浏览器......
我以前从未使用过 jsfiddle。试一试，但还不能让它工作。不确定这是否有帮助：jsfiddle.net/VLHm8
有大量对本地文件的引用，因此您应该首先解决这些问题以使 jsfiddle 工作（希望如此）并有助于确定真正的问题是什么。